easyui datagrid editor在编辑状态下更新列值并不结束编辑。

首先是自定义了一个方法uodateColumn更新列值

/**
			 *自定义的修改列值方法 
			 */
			$.extend($.fn.datagrid.methods, {
				updateColumn: function(datagrid,data) {
					datagrid.each(function(){
						//获取缓存中的配置数据
						var gridObj=$.data(this,"datagrid");
						var opts=gridObj.options;
						//获取行数据
						var row=opts.finder.getRow(this,data.index);
						data.row=data.row||{};
						var update=false;
						//判断是否需要更新
						for(var updateColumn in data.row){
							if(data.row[updateColumn]!==row[updateColumn]){
								update=true;
								break;
							}
						}
						if(update){
							var tr=opts.finder.getTr(this,data.index);
							var view=opts.view.renderRow.call(opts.view,this,["attr1"],true,data.index,data.row);
							if(tr.hasClass("datagrid-row-editing")){
								//找到所有需要更新值的列
								tr.find('div').each(function(i){
									if(data.row[$(this).parent().attr('field')]!=undefined){
										if($(this).attr('class').indexOf('datagrid-editable')!=-1){
											var ed=$.data(this,"datagrid.editor");
											if(ed!=undefined){
												ed.actions.setValue(ed.target,data.row[$(this).parent().attr('field')]);
											}else{
												$(this).html(data.row[$(this).attr('field')]);
											}											
										}else{
											$(this).html(data.row[$(this).attr('field')]);
											<span style="background-color: rgb(255, 0, 0);">$(this).addClass("datagrid-editable");</span>
										}
									}
								});
							}
						}
					});
				}
			});

在这里，还有一个需要注意的时，我们将没在编辑状态下的列设值的同时添加了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',
						width: 20,
						align: 'center',
						checkbox: true
					}, {
						field: 'productid',
						title: 'productid',
						width: 20,
						sortable: true,
						align: 'center'
					}, {
						field: 'listprice',
						title: 'List Price',
						width: 20,
						align: 'center',
						editor: {
							type: 'numberbox',
							options: {
								precision: 2,
								groupSeparator: ','
							}
						}
					}, {
						field: 'unitcost',
						title: 'unitcost',
						width: 20,
						sortable: true,
						editor: {
							type: 'textbox'
						}
					}, {
						field: 'attr1',
						title: 'attr1',
						width: 20,
						sortable: true,
						editor:{
							type:'datebox'
						}
					}, {
						field: 'status',
						title: 'status',
						width: 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);
			}

到此，结束！