jqueryeasyui实现动态编辑文本框Demo

在官网也有对应的demo，但是我直接写的时候，总是不成功。调试了以后才能使用

现在对应的js中添加如下代码

$.extend($.fn.datagrid.methods, {
    editCell: function (jq, param) {
        return jq.each(function () {
            var opts = $(this).datagrid('options');
            var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
            for (var i = 0; i < fields.length; i++) {
                var col = $(this).datagrid('getColumnOption', fields[i]);
                col.editor1 = col.editor;
                if (fields[i] != param.field) {
                    col.editor = null;
                }
            }
            $(this).datagrid('beginEdit', param.index);
            for (var i = 0; i < fields.length; i++) {
                var col = $(this).datagrid('getColumnOption', fields[i]);
                col.editor = col.editor1;
            }
        });
    }
});

然后是几个关键的方法:

var editIndex = undefined;
//判断是否编辑结束  
function endEditing() {
    if (editIndex == undefined) { return true }
	var ed = $('#tbl_inventory').datagrid('getEditor', {index:editIndex,field:'shelf'});
    var shelfName = $(ed.target).combobox('getText');
    var shelfId = $(ed.target).combobox('getValue');
    $('#tbl_inventory').datagrid('getRows')[editIndex]['shelfName'] = shelfName;
    if(shelfId == undefined || shelfId == 0 || shelfId == ''){
    	$.messager.alert('提示','请选择货架','info');
    	return false;
    }
    if ($('#tbl_inventory').datagrid('validateRow', editIndex)) {
        $('#tbl_inventory').datagrid('endEdit', editIndex);
        editIndex = undefined;
        return true;
    } else {
        return false;
    }
}
//编辑完单元格之后触发的事件  
function onAfterEdit(index, row, changes) {
	editIndex = undefined;
}
//点击单元格触发的事件  
function onDblClickCell(index, field) {
	//只在初次提交页面提示选择数据中心
	if (optMode && optMode == "view" ) {//不能修改
		return false;
	}
    if (endEditing()) {
        $('#xxx').datagrid('selectRow', index).datagrid('editCell', { index: index, field: field });
        editIndex = index;
    }
}

然后就可以在自己的代码中使用了：

$('#xxx').datagrid(
			{
				url : ctx + "/proc/xxx/xxx.do?" + sessInfo,
				type : 'post',
				queryParams : param,
				title : '列表',
				//height: '500',			
				collapsible : true,
				nowrap : true,
				striped : true,
				fitColumns : true,
				rownumbers : true,
				singleSelect : true,
				idField : 'id',
				remoteSort : false,
				pagination : true,
		        onDblClickCell:'view' == controlType ? null:onDblClickCell,
                onClickCell: endEditing,
                onAfterEdit:onAfterEdit,
				pageSize : 10,
				pageList : [10,20,50 ],
				columns : [ [
						{field:"id",title:"",hidden:true},
						{field:"name",title:"名称",width:20,align:"center"},
						...,
						{field:"shelf",title:"货架",width:20,align:"center",formatter : function(value, row){
			                    if(value == '' || value == 0){
			                        return '请选择';
			                    }
			                    return row.shelfName;
			                },
				            editor:{
	                   		  type:'combobox',
	                   		  options:{
	                   			  valueField:'id',
	                   			  textField:'name',
	                   			  url:ctx+"/selection/xxx.do?"+sessInfo+"&dcid="+dcid,
	                   		      editable:false,
	                   		      onSelect:function(rec){
			            				var row = $('#xxx').datagrid('getSelected');
			            				if("0"!=rec.id){
											row.shelfId = rec.id;
											row.shelfName = rec.name;
											if("1"==row.assetType){
												map[row.id]=row;
											}
			            				}else{
											row.shelfId = '';
											row.shelfName = '';
											if("1"==row.assetType){
												delete(map[row.id]);
											}
			            				}
			            			},
	                   		  }
			                }},
						{
									field : 'opt',
									title : "操作",
									width : 20,
									align : 'center',
									formatter : function(value, rec, index) {
										var package_id = rec.id;
										if (null != package_id && undefined != package_id && "" != package_id) {
											var d = '<a href="javascript:void(0)"  style="color:#00479d;margin-right:3px;" title="查看" '
												+ 'onclick="viewassetbase(\''+ rec.id +','+ rec.firstclass +','+ rec.secondclass +','+ rec.thirdclass +'\')"><span style="vertical-align: -6px;display:inline-block;width:20px;height:20px;background: url(themes/icons/view.png) no-repeat;"></span></a> ';
								    		
											d = d + '&nbsp;&nbsp;<a href="javascript:void(0)"  title="删除" onclick="toDelOutInventoryPackage(\'' + package_id
													+ '\')"><span style="vertical-align: -6px;display:inline-block;width:20px;height:20px;background: url('
													+ ctx + '/themes/icons/remove.png) no-repeat;"></span></a> ';
											return d;
										} else {
											return "";
										}
									}
								}] ],
				onClickRow : function(rowIndex, rowData) {
					//var location_id = rowData["id"];
				},
				onLoadError : function(data) {
					onLoadError(data);
				},
				onLoadSuccess : function(data) {
					if (null == data.rows || undefined == data.rows
							|| data.rows.length == 0) {
						var tips = "<font color=red>没有数据...</font>";
						$('#tbl_locations').datagrid("insertRow", {
							index : 1,
							row : {
								name : tips
							}
						});
					}
				}
			});