博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery EasyUI 在datagrid上使用combotree 进行多选
阅读量:4841 次
发布时间:2019-06-11

本文共 2173 字,大约阅读时间需要 7 分钟。

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: 

转载于:https://www.cnblogs.com/dashen/p/4313032.html

你可能感兴趣的文章
spring security中当前用户信息
查看>>
[中国寒龙出品]VB程序设计视频第十四课,更多请关注我们的官博。
查看>>
LinuxMint 17.1 Cinnamon桌面窗口焦点bug
查看>>
PHP函数
查看>>
缩点 CF893C Rumor
查看>>
Spring详解篇之 AOP面向切面编程
查看>>
COMP0037 Coursework
查看>>
Spring Framework 5.x 学习专栏
查看>>
Linux 磁盘挂载和mount共享
查看>>
云计算开发教程,云计算能干什么?
查看>>
利用”+“、”-“JS字符串类型与数字类型转换
查看>>
【剑指offer面试题4】替换空格%20和清除空格
查看>>
【AtCoder】AGC032
查看>>
R学习-小白笔记07
查看>>
Apache Tez 0.7、0.83、 0.82 安装、调试笔记
查看>>
JAVA基础学习之路(五)数组的定义及使用
查看>>
利用Chrome模拟访问移动端网页
查看>>
20170505
查看>>
团队-科学计算器-团队一阶段互评
查看>>
ios触摸事件处理
查看>>