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):
combotree: { init: function(container, options){ var editor = jQuery('<input type="text">').appendTo(container); editor.combotree(options); return editor; }, destroy: function(target){ jQuery(target).combotree('destroy'); }, getValue: function(target){ return jQuery(target).combotree('getValue'); }, setValue: function(target, value){ jQuery(target).combotree('setValue', value); }, resize: function(target, width){ jQuery(target).combotree('resize', width); } }
jQuery.extend(jQuery.fn.datagrid.defaults.editors, { combotree: { init: function(container, options){ var editor = jQuery('<input type="text">').appendTo(container); editor.combotree(options); return editor; }, destroy: function(target){ jQuery(target).combotree('destroy'); }, getValue: function(target){ var temp = jQuery(target).combotree('getValues'); //alert(temp); return temp.join(','); }, setValue: function(target, value){ var temp = value.split(','); //alert(temp); jQuery(target).combotree('setValues', temp); }, resize: function(target, width){ jQuery(target).combotree('resize', width); } }});