1 首先是自定义了一个方法uodateColumn更新列值 2 3 /** 4 *自定义的修改列值方法 5 */ 6 $.extend($.fn.datagrid.methods, { 7 updateColumn: function(datagrid,data) { 8 datagrid.each(function(){ 9 //获取缓存中的配置数据 10 var gridObj=$.data(this,"datagrid"); 11 var opts=gridObj.options; 12 //获取行数据 13 var row=opts.finder.getRow(this,data.index); 14 data.row=data.row||{}; 15 var update=false; 16 //判断是否需要更新 17 for(var updateColumn in data.row){ 18 if(data.row[updateColumn]!==row[updateColumn]){ 19 update=true; 20 break; 21 } 22 } 23 if(update){ 24 var tr=opts.finder.getTr(this,data.index); 25 var view=opts.view.renderRow.call(opts.view,this,["attr1"],true,data.index,data.row); 26 if(tr.hasClass("datagrid-row-editing")){ 27 //找到所有需要更新值的列 28 tr.find('div').each(function(i){ 29 if(data.row[$(this).parent().attr('field')]!=undefined){ 30 if($(this).attr('class').indexOf('datagrid-editable')!=-1){ 31 var ed=$.data(this,"datagrid.editor"); 32 if(ed!=undefined){ 33 ed.actions.setValue(ed.target,data.row[$(this).parent().attr('field')]); 34 }else{ 35 $(this).html(data.row[$(this).attr('field')]); 36 } 37 }else{ 38 $(this).html(data.row[$(this).attr('field')]); 39 $(this).addClass("datagrid-editable"); 40 } 41 } 42 }); 43 } 44 } 45 }); 46 } 47 });
在这里，还有一个需要注意的时，我们将没在编辑状态下的列设值的同时添加了class:datagrid-editable;
所以在easyui.min.js中针对结束编辑的方法中会对该类进行扫描获取editor对象，但我们在这里是获取不到的。
所以在源码中我们加入了以下处理方法：
if(ed!=undefined){
var t=$(ed.target);
var _6eb=t.data("textbox")?t.textbox("textbox"):t;
_6eb.triggerHandler("blur");
var _6ec=ed.actions.getValue(ed.target);
if(row[_6ea]!=_6ec){
row[_6ea]=_6ec;
_6e8=true;
_6e9[_6ea]=_6ec;
}
}else{
$(this).removeClass("datagrid-editable");
var _6cv=$(this).html();
if(row[_6ea]!=_6cv){
row[_6ea]=_6cv;
_6e8=true;
_6e9[_6ea]=_6cv;
}
}
其实更明确的做法是将endEdit也重写了。这样就避免了懂源码。
在html页面中按照easyui的表格使用，声明表格：
<pre name="code" class="html">$('#demo').datagrid({ fitColumns: true, iconCls: 'icon-edit', singleSelect: true, url: 'js/datagrid_data1.json', method: 'get', onClickRow: onClickRow, onEndEdit: onEndEdit, columns: [ [{ field: 'itemid', title: 'Item ID', 20, align: 'center', checkbox: true }, { field: 'productid', title: 'productid', 20, sortable: true, align: 'center' }, { field: 'listprice', title: 'List Price', 20, align: 'center', editor: { type: 'numberbox', options: { precision: 2, groupSeparator: ',' } } }, { field: 'unitcost', title: 'unitcost', 20, sortable: true, editor: { type: 'textbox' } }, { field: 'attr1', title: 'attr1', 20, sortable: true, editor:{ type:'datebox' } }, { field: 'status', title: 'status', 20, sortable: true, align: 'left', editor:{ type:'combobox', options:{ valueField:'id', textField:'text', data:[{id:1,text:'一号'},{id:2,text:'二号'}] } } }] ] });
//声明一些打开编辑的事件
var editIndex = undefined;
function endEditing() {
if (editIndex == undefined) {
return true
}
if ($('#demo').datagrid('validateRow', editIndex)) {
$('#demo').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickRow(index) {
if (editIndex != index) {
if (endEditing()) {
$('#demo').datagrid('selectRow', index).datagrid('beginEdit', index);
var ed = $('#demo').datagrid('getEditor', {
index: index,
field: 'listprice'
});
if (ed) {
ed.target.textbox({
inputEvents: $.extend({}, $.fn.textbox.defaults.inputEvents, {
keydown: function(e) {
if (e.keyCode == 13) {
var row = $('#demo').datagrid('getSelected');
$('#demo').datagrid('updateColumn',{index:index,row:{attr1:'2016-01-12',status:'1',unitcost:'33'}});
}
}
})
});
}
editIndex = index;
} else {
setTimeout(function() {
$('demo').datagrid('selectRow', editIndex);
}, 0);
}
}
}
function onEndEdit(index, row) {
console.log(row);
}