jQuery EasyUI 在datagrid上使用combotree 进行多选

标签：

datagrid本身有编辑功能，根据官方说明，在需要编辑的列上，加上editor 属性即可。具体的类型有以下几种： 
text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree. 

最近想利用combotree实现一个可以多选的树，途中遇到一些问题，放到这里分享一下： 

1. 基本写法： 
editor="{type:‘combotree‘,options:{url:‘datagrid_data.json‘,multiple:true}}" 
这里的type指的是编辑器类型，为了实现多选树，我们使用combotree。 options是 combotree的相关选项，注意：由于它扩展自combo和tree ，因此其选项可以从这三种控件中选择。 
url指的是数据加载的来源，这里我们就用demo里的datagrid_data.json文件。multiple是实现多选的关键，之前我一直在tree的选项里面找，比如checkbox=true，这个实现tree的多选没有问题，但是在combotree上不起作用，后来找到了combo的选项，试了一下这个multiple，终于解决了问题。 

2. 保存数据： 
上面写好之后，就可以在datagrid上实现多选树了，但是保存之后你会发现，虽然选中的数据用逗号分隔开了，但是只有第一条数据被保存了。editor使用combotree的源码如下（在jquery.easyui.min.js）： 

Java代码  

1. combotree: {  
2.            init: function(container, options){  
3.                var editor = jQuery(‘<input type="text">‘).appendTo(container);  
4.                editor.combotree(options);  
5.                return editor;  
6.            },  
7.            destroy: function(target){  
8.                jQuery(target).combotree(‘destroy‘);  
9.            },  
10.            getValue: function(target){  
11.                return jQuery(target).combotree(‘getValue‘);  
12.            },  
13.            setValue: function(target, value){  
14.                jQuery(target).combotree(‘setValue‘, value);  
15.            },  
16.            resize: function(target, width){  
17.                jQuery(target).combotree(‘resize‘, width);  
18.            }  
19.        }  

注意看，getValue 和 setValue 方法，他们调用了combotree(‘getValue‘);和combotree(‘setValue‘, value);通过查看API（combo的Methods）可以发现，getValue和setValue是用来获取和设置单值的，如果要设置和获取多个值，需要getValues,setValues 
因此重写一下combotree的扩展： 

Java代码  

1. jQuery.extend(jQuery.fn.datagrid.defaults.editors, {  
2.         combotree: {  
3.             init: function(container, options){  
4.                 var editor = jQuery(‘<input type="text">‘).appendTo(container);  
5.                 editor.combotree(options);  
6.                 return editor;  
7.             },  
8.             destroy: function(target){  
9.                 jQuery(target).combotree(‘destroy‘);  
10.             },  
11.             getValue: function(target){  
12.                 var temp = jQuery(target).combotree(‘getValues‘);  
13.                 //alert(temp);  
14.                 return temp.join(‘,‘);  
15.             },  
16.             setValue: function(target, value){  
17.                 var temp = value.split(‘,‘);  
18.                 //alert(temp);  
19.                 jQuery(target).combotree(‘setValues‘, temp);  
20.             },  
21.             resize: function(target, width){  
22.                 jQuery(target).combotree(‘resize‘, width);  
23.             }  
24.     }  
25. });  

也就是说，从combotree获取到的值是以逗号分隔（分隔符可以改，默认是逗号）的字符串，之前的setValue方法只取第一个元素，如果转换成数组，就可以作为参数传递给setValues方法，这样datagrid就全部接收了 

OK 经过以上两步，datagrid上直接操作多选树就实现了，当然我们这里只用到了一些就简单的options，如果需要更多的功能，可以参考官方API： 
http://www.jeasyui.com/documentation/index.php#

jQuery EasyUI 在datagrid上使用combotree 进行多选

标签：

原文地址：http://www.cnblogs.com/dashen/p/4313032.html