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);
}
}
注意看,getValue 和 setValue 方法,他们调用了combotree('getValue');和combotree('setValue', value);通过查看API(combo的Methods)可以发现,getValue和setValue是用来获取和设置单值的,如果要设置和获取多个值,需要getValues,setValues
因此重写一下combotree的扩展:
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);
}
}
});
也就是说,从combotree获取到的值是以逗号分隔(分隔符可以改,默认是逗号)的字符串,之前的setValue方法只取第一个元素,如果转换成数组,就可以作为参数传递给setValues方法,这样datagrid就全部接收了
OK 经过以上两步,datagrid上直接操作多选树就实现了,当然我们这里只用到了一些就简单的options,如果需要更多的功能,可以参考官方API:
http://www.jeasyui.com/documentation/index.php#
分享到:
相关推荐
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
包括表结构及数据,后台Controller和实体类,页,及主要js包。 同时成功的图片。jquery,easyui,combotree,search,树形带搜索框。
jquery.easyui.datagrid自动合并列扩展,支持多列合并。 用法:加载成功后 $('#'+tab).datagrid("autoMergeCells",['列名','列名']);
UI设计在一个系统中的重要性是不容忽视的,我们开发人员要做到:让用户去控制计算机,而不是计算机控制用户;减少用户的记忆负担;保持界面一致。 给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头...
jqueryEasyUI中的dataGrid实现的表格的增删改查,后台使用servlet,有数据库源码
jquery easyui datagrid 性能优化,优化后可快速提升查询性能。唯一的缺陷就是不支持可编辑grid了。只需要在引入easyui.js后面引入此js即可。
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
jquery easyui datagrid demo 详解 增删改查
主要介绍了jQuery EasyUI之DataGrid使用实例
Jquery-easyui的datagrid中文文档
jquery EasyUI的API,方便使用easyui查看。。。。。。
两种方法将easyui datagrid 中的数据导出到Excel中,均以验证可以正常使用
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
easyui的datagrid中editor和combobox的级联,在datagrid中编辑项是下拉框的实现方式
jquery easyui datagrid 教程的部分应用。
easyui的datagrid中editor和combogrid的结合使用,datagrid中编辑项是下拉表的实现方式
资源名称:Jquery easyui 使用说明内容简介:Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的...