1.首先html标签代码中要加入editor属性
<div> <div id="skuToolbar" style="padding:5px;"> <a onclick="showSelectProductWin()" class="easyui-linkbutton" iconCls="icon-add" plain="false">添加商品</a> </div> <table id="orderDetailDataGrid" class="easyui-datagrid" toolbar="#skuToolbar" style="width:100%;height:auto" data-options="singleSelect:true,onClickCell:onClickCellOrderDetail"> <thead> <tr> <th data-options="field:'require_num',width:60,editor:'numberbox'">数量</th> <th data-options="field:'weight',width:100,editor:'datebox'">计划货期</th> <th data-options="field:'description',width:200,editor:'textbox'">备注</th> </tr> </thead> </table> </div>
2.扩展实现单元格编辑的方法
$.extend($.fn.datagrid.methods, { editCell: function(jq,param){ return jq.each(function(){ 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; } }); } });
3.开始编辑和结束编辑方法对应标签中的onClickCell
var editIndexOrderDetail = undefined; function endEditingOrderDetail(){ if (editIndexOrderDetail == undefined){return true} if ($('#orderDetailDataGrid').datagrid('validateRow', editIndexOrderDetail)){ $('#orderDetailDataGrid').datagrid('endEdit', editIndexOrderDetail); editIndexOrderDetail = undefined; return true; } else { return false; } } function onClickCellOrderDetail(index, field){ if (endEditingOrderDetail()){ $('#orderDetailDataGrid').datagrid('selectRow', index).datagrid('editCell', {index:index,field:field}); editIndexOrderDetail = index; } }
4.提交的时候要结束编辑
$('#orderDetailDataGrid').datagrid('endEdit', editIndexOrderDetail);