easyui_datagrid编辑器.docxVIP

1,建立编辑器 从api得知，扩展一种新的编辑器类型，需要提供以上几个方法。项目中正好需要一个checkbox 类型编辑器，但在easyui中并没提供这样的编辑器，那我们可以通过扩展编辑器来解决，扩展如下 $.extend($.fn.datagrid.defaults.editors, { checkbox: {//调用名称 init: function (container, options) { //container 用于装载编辑器 options,提供编辑器初始参数 var input = $(input type=checkbox class=datagrid-editable-input).appendTo(container); //这里我把一个 checkbox类型的输入控件添加到容器container中 // 需要渲染成easyu提供的控件，需要时用传入options,我这里如果需要一个combobox，就可以 这样调用 bobox(options); return input; }, getValue: function (target) { //datagrid 结束编辑模式，通过该方法返回编辑最终值 //这里如果用户勾选中checkbox返回1否则返回0 return $(target).prop(checked) ? 1 : 0; }, setValue: function (target, value) { //datagrid 进入编辑器模式，通过该方法为编辑赋值 //我传入value 为0或者1，若用户传入1则勾选编辑器 if (value) $(target).prop(checked, checked) }, resize: function (target, width) { //列宽改变后调整编辑器宽度 var input = $(target); if ($.boxModel == true) { input.width(width - (input.outerWidth() - input.width())); } else { input.width(width); } } }});新的编辑扩展好以后，跟系统默认的编辑器使用方式一样：2.获取编辑器datagrid 通过调用 beginEdit 传入要开始编辑行的对应的索引，该行进入编辑模式。通过 endEdit 或者 cancleEdit结束编辑模式，endEdit会提交一个数据变更记录，cancleEdit会还原为初始数据。getEditors以及getEditor 返回指定行当前编辑器，getEditor 底层调用getEditors 方法。getEditors 返回一个编辑器对象数组。3.编辑器事件 一个项目中存在这样三个需求 1，根据不同的操作结果，渲染不同编辑控件的操作模式，如以下图所示，用户选择小组1，日期控制范围必须到天，右侧日期控件提供按天选择展示。用户选择小组6，日期控制范围到月就可以了，右侧日期控件提供按月选择展示。 2，列表中存在开始日期，和结束日期必须控制开始日期不能大于结束日期或者结束日期不能大于开始日期 3，根据用户选择的开始日期，提取对应的年份。 针对这两个需求，该怎么实现呢？ 先来了解下datagrid在编辑模式提供哪些可用事件，以及如何扩展一个新数据验证规则API中提供事件：扩展数据验证规则：$.extend($.fn.validatebox.defaults.rules, { //验证开始日期只能小于结束日期 sdatecompare: { validator: function (value, param) { var end = param[0]; if (typeof end == string) { end = $(param[0]);//结束日期 selector } if (!end.datebox(getValue)) { return true; } var endDate = new Date(end.datebox(getValue)); var CurDate = new Date(value); return CurDate endDate; }, message: 开始日期必须小于结束日期 }, edatecompare: { validator: function (value, param) { var start = param[0]; if (typeof start == string) { start = $(param[0]); //开始日期 selector } if (!start.datebox(getValue) || !value) { r