easyui-datagrid 编辑模式详解

   一，创建编辑器

 

       从api得知，扩展一种新的编辑器类型，须要提供以上几个方法。项目中正好须要一个checkbox 类型编辑器，但在easyui中并没提供这样的编辑器，那咱们能够经过扩展编辑器来解决，扩展以下

 

 1  $.extend($.fn.datagrid.defaults.editors, {  2     checkbox: {//调用名称
 3         init: function (container, options) {  4            //container 用于装载编辑器 options,提供编辑器初始参数
 5             var input = $('<input type="checkbox" class="datagrid-editable-input">').appendTo(container);  6            //这里我把一个 checkbox类型的输入控件添加到容器container中
 7            // 须要渲染成easyu提供的控件，须要时用传入options,我这里若是须要一个combobox，就能够 这样调用 input.combobox(options);
 8             return input;  9  }, 10         getValue: function (target) { 11            //datagrid 结束编辑模式，经过该方法返回编辑最终值
12            //这里若是用户勾选中checkbox返回1不然返回0
13             return $(target).prop("checked") ? 1 : 0; 14  }, 15         setValue: function (target, value) { 16            //datagrid 进入编辑器模式，经过该方法为编辑赋值
17             //我传入value 为0或者1，若用户传入1则勾选编辑器
18             if (value) 19                 $(target).prop("checked", "checked") 20  }, 21         resize: function (target, width) { 22            //列宽改变后调整编辑器宽度
23             var input = $(target); 24             if ($.boxModel == true) { 25                 input.width(width - (input.outerWidth() - input.width())); 26             } else { 27  input.width(width); 28  } 29  } 30  } 31 });

 新的编辑扩展好之后，跟系统默认的编辑器使用方式同样：

 

二 , 获取编辑器

 

datagrid 经过调用 beginEdit 传入要开始编辑行的对应的索引，该行进入编辑模式。经过 endEdit 或者 cancleEdit结束编辑模式，endEdit会提交一个数据变动记录，cancleEdit会还原为初始数据。

getEditors以及getEditor 返回指定行当前编辑器，getEditor 底层调用getEditors 方法。getEditors 返回一个编辑器对象数组。

三，编辑器事件

   一个项目中存在这样三个需求

    1，根据不一样的操做结果，渲染不一样编辑控件的操做模式，如如下图所示，用户选择小组1，日期控制范围必须到天，右侧日期控件提供按天选择展现。用户选择小组6，日期控制范围到月就能够了，右侧日期控件提供按月选择展现。

    2，列表中存在开始日期，和结束日期必须控制开始日期不能大于结束日期或者结束日期不能大于开始日期

    3，根据用户选择的开始日期，提取对应的年份。

 

 

针对这两个需求，该怎么实现呢？

   先来了解下datagrid在编辑模式提供哪些可用事件，以及如何扩展一个新数据验证规则

API中提供事件：

 

扩展数据验证规则：

 1 $.extend($.fn.validatebox.defaults.rules, {  2    //验证开始日期只能小于结束日期
 3  sdatecompare: {  4         validator: function (value, param) {  5             var end = param[0];  6             if (typeof end == 'string') {  7                 end = $(param[0]);//结束日期 selector
 8  }  9             if (!end.datebox("getValue")) { 10                 return true; 11  } 12             var endDate = new Date(end.datebox("getValue")); 13             var CurDate = new Date(value); 14             return CurDate < endDate; 15  }, 16         message: '开始日期必须小于结束日期'
17  }, 18  edatecompare: { 19         validator: function (value, param) { 20             var start = param[0]; 21             if (typeof start == 'string') { 22                 start = $(param[0]); //开始日期 selector
23  } 24             if (!start.datebox("getValue") || !value) { 25                 return true; 26  } 27             var startDate = new Date(start.datebox("getValue")); 28             var CurDate = new Date(value); 29             $.fn.validatebox.defaults.rules.edatecompare.message = '结束日期必须大于开始日期'; 30             return CurDate > startDate; 31  }, 32         message: ''
33  }, 34 });

 

     有了以上两点基本知识，这三个需求处理起来就很顺利了。第一个需求，根据不一样的数据渲染不一样的界面。在此我看到了 onBeforeEdit 根据字面意思就是在开始编辑以前，官方解释，用户在开始编辑一行数据时触发。也就是说，在这个事件激发以前，datagrid根本尚未创建或初始编辑器控件，而咱们又知道datagrid 编辑是经过列属性中editor中options渲染控件的，那在这里改变options的值不就行了么，因而在onBeforeEdit我敲上了一下js代码：

1 var zSelected = fazgl.grdtnz.datagrid("getSelected"); 2 var ksOpts = $(this).datagrid("getColumnOption", "F_KSRQ"); 3 var jsOpts = $(this).datagrid("getColumnOption", "F_JSRQ"); 4 var rendmodes = ["year", 'month'];//easyui calendar 中扩展一个mode属性，用于显示选择到月或者到天
5 $.extend(ksOpts.editor.options, { mode: rendmodes[zSelected.F_SFFT] }); 6 $.extend(jsOpts.editor.options, { mode: rendmodes[zSelected.F_SFFT] });

 

     经过验证这个思路彻底正确，合理处理了根据不一样数据展示不一样界面的需求。第一个需求到此结束，如今聚焦到第二个需求，开始日期必须小于结束日期，从上面扩展的数据验证规则sdatecompare和edatecompare，咱们知道须要传入一个被比较日期控件的selector。那该怎么实现呢？在回看一下 API，其中有onBeginEdit 这么一个事件，经过查阅源码，了解到datagrid在激发该事件时已经对应的编辑控件已经建立完毕，那经过datagrid 提供方法 getEditors或者getEditor获得编辑器，其中的target不就是须要的selector么！ 因而乎，我在onBeginEdit 中敲下了以下代码：

 1             var editors = $(this).datagrid("getEditors", index);  2             var ed_Ksrq = editors[0];//开始日期编辑器
 3             var ed_Jsrq = editors[1];//结束日期编辑器
 4             //easyui 日期控件从 textbox扩展，全部须要获得对应textbox的options才能加入验证规则
 5             var ksopts = $(ed_Ksrq.target).datebox("textbox").validatebox("options");  6             ksopts.validType = ksopts.validType || {};//若是编辑器最初设置，对应编辑器validType为null,这里作下为空判断
 7  $.extend(ksopts.validType, { sdatecompare: [ed_Jsrq.target] });  8             var jsopts = $(ed_Jsrq.target).datebox("textbox").validatebox("options");  9             jsopts.validType = jsopts.validType || {}; 10             $.extend(jsopts.validType, { edatecompare: [ed_Ksrq.target] });

 

      通过测试，思路彻底正确，成功实现动态加入验证规则。有了以上经验，对于第三个需求，感受已经没有什么难度了，datagrid提供 onEndEdit（销毁编辑器前） ，onAfterEdit（销毁编辑器后），都会返回 一个changes 对象，里边保存了变动的数据,因而我在onEndEdit 写下了以下代码：

 1  var nrow = {};  2 
 3             //判断是否有更改开始日期
 4 
 5             if (changes["F_KSRQ"]) {  6 
 7                 var kAry = changes.F_KSRQ.split("-");  8 
 9                 var date = new Date(parseInt(kAry[0]), parseInt(kAry[1]) - 1); 10 
11                 nrow["F_NIAN"] = date.getFullYear(); 12 
13                 nrow["F_KSY"] = kAry[1]; 14 
15                 nrow.F_KSRQ = row.F_KSRQ + "-" + "01"; 16 
17  } 18 
19           //更新数据
20 
21             $(this).datagrid("updateRow", { 22 
23  index: index, 24 
25  row: nrow 26 
27  }); 28 
29             nrow = null;

这样就 onCancelEdit 这个事件没有讲解了，不过根据api也明白是在何时调用的，能够作哪些事，还等待合适的需求又来在讲解！

2015-11-24