easyui datagrid编辑器.docx

easyui_datagrid编辑器1,建立编辑器
从api得知,扩展一种新的编辑器类型,需要提供以上几个方法。项目中正好需要一个checkbox 类型编辑器,但在easyui中并没提供这样的编辑器,那我们可以通过扩展编辑器来解决,扩展如下
$.extend($., {
checkbox: {//调用名称
init: function (container, options) {
//container 用于装载编辑器 options,提供编辑器初始参数
var input = $('<input type="checkbox" class="datagrid-editable-input">').appendTo(container);
//这里我把一个 checkbox类型的输入控件添加到容器container中
// 需要渲染成easyu提供的控件,需要时用传入options,bobox,就可以这样调用 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) {
(width - (() - ()));
} else {
(width);
}
}
}
});
新的编辑扩展好以后,跟系统默认的编辑器使用方式一样:

datagrid 通过调用 beginEdit 传入要开始编辑行的对应的索引,该行进入编辑模式。通过 endEdit 或者 cancleEdit结束编辑模式,endEdit会提交一个数据变更记录,cancleEdit会还原为初始数据。
getEditors以及getEditor 返回指定行当前编辑器,getEditor 底层调用getEditors 方法。getEditors 返回一个编辑器对象数组。

一个项目中存在这样三个需求
1,根据不同的操作结果,渲染不同编辑控件的操作模式,如以下图所示,用户选择小组1,日期控制范围必须到天,右侧日期控件提供按天选择展示。用户选择小组
6,日期控制范围到月就可以了,右侧日期控件提供按月选择展示。
2,列表中存在开始日期,和结束日期必须控制开始日期不能大