[分享]JavaScript+jQuery两栏选择控件

ideawu

原文: http://www.ideawu.net/blog/?p=399

两栏选择功能经常用到, 就是有一栏显示可选的数据, 另一栏显示当前已选择的数据. 我包装成一个JavaScript控件, 方便使用. 使用时需要引入两个JavaScript文件, 因为使用了jQuery, 所以还需要引入jQuery的js库文件:

1. 
   
2. <script type="text/javascript" src="jquery.js"></script>
   
3. <script type="text/javascript" src="TableView.js"></script>
   
4. <script type="text/javascript" src="SelectorView.js"></script>
   

复制代码

在HTML文件中写上:

1. 
   
2. <div id="sel_div">
   
3. </div>
   
4. 
   
5. <script type="text/javascript">
   
6. <!--
   
7. var sel = new SelectorView('sel_div'); // sel_div 是 HTML 节点 id
   
8. sel.src.header = {
   
9.         'id'                : 'Id',
   
10.         'name'                : 'Name',
    
11.         'text'                : 'Text'
    
12. };
    
13. sel.dst.header = {
    
14.         'id'                : 'Id',
    
15.         'name'                : 'Name'
    
16. };
    
17. sel.src.dataKey = 'id';
    
18. sel.dst.dataKey = 'id';
    
19. sel.src.title = '可选';
    
20. sel.dst.title = '已选';
    
21. sel.render();
    
22. 
    
23. sel.src.add({id: 1, name: 'Tom', text: 'Tomcat'});
    
24. sel.src.add({id: 2, name: 'Jerry', text: 'Jerrimy'});
    
25. sel.src.add({id: 3, name: 'Jim', text: 'System Engineer'});
    
26. sel.src.add({id: 4, name: 'Lucy', text: 'Lucy & Lily'});
    
27. //-->
    
28. </script>
    

复制代码

演示地址: http://www.ideawu.net/person/two ... olumn-selector.html

[ 本帖最后由 ideawu 于 2009-7-26 23:30 编辑 ]

网鬼

不错，收藏

ideawu

经过多次升级, 现在已经具有了分页和过滤等功能!

turionboy

看起来不错，楼主辛苦了

yhyaohu

mark