最近手头有个web项目需要用到第三方控件(EasyUi),用第三方控件做出来的效果毕竟比原生态的要稍微好看那么一点，该项目中有个需求，需要在数据列表中直接编辑数据保存，行话叫做行内编辑。
在讲行内编辑之前，我们需要先了解如何使用EasyUi创建一个DataGrid，当然方式有很多（1.easyui.js，或者直接html代码加easyui的Style），我采用的是JS的方式：
一、使用Js创建DataGrid
上面是效果图，
Html代码如下：在页面定义一个table
<!--数据展示 --> <div> <table></table> </div>
Js代码如下：
有几个我自己认为比较重要的属性在此标记下
url：这里是datagrid获取数据集的地址，就是你的Action，需要注意的是，你的Action需要返回Json格式的数据。
pagination：设置datagrid是否分页显示
queryParams：你的查询条件参数
formatter：格式化，在日期列用到了，EasyUi的datagrid显示日期如果不格式话，日期会乱显示
这些属性在EasyUi的官网都有详细介绍，我就不深入解释了。
$("#DataGridInbound").datagrid({ title: '入库详情', idField: 'Id', rownumbers: 'true', url: '/Inbound/GetPageInboundGoodsDetail', pagination: true,//表示在datagrid设置分页 rownumbers: true, singleSelect: true, striped: true, nowrap: true, collapsible: true, fitColumns: true, remoteSort: false, loadMsg: "正在努力加载数据，请稍后...", queryParams: { ProductName: "", Status: "",SqNo:"" }, onLoadSuccess: function (data) { if (data.total == 0) { var body = $(this).data().datagrid.dc.body2; body.find('table tbody').append('<tr><td><h1>暂无数据</h1></td></tr>'); $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide(); } //如果通过调用reload方法重新加载数据有数据时显示出分页导航容器 else $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').show(); }, columns: [[ { field: 'ck', checkbox: true }, { field: 'Id', hidden: 'true' }, { field: 'InBoundId', hidden: 'true' }, { field: 'ProductId', hidden: 'true' }, { field: 'ProductTypeId', hidden: 'true' }, { field: 'SqNo', title: '入库参考号', width: '100', align: 'left', sortable: true }, { field: 'Status', title: '状态', width: '100', align: 'left', sortable: true, formatter: function (value, index, row) { if (value == "1") { return '<span>已入库</span>'; } else if (value == "-1") { return '<span>待入库</span>'; } } }, { field: 'InboundDate', title: '入库日期', width: '100', align: 'left', sortable: true, formatter: function (date) { var pa = /.*\((.*)\)/; var unixtime = date.match(pa)[1].substring(0, 10); //通过正则表达式来获取到时间戳的字符串 return getTime(unixtime); } }, { field: 'ProductName', title: '产品名称', width: '100', align: 'left', sortable: true }, { field: 'ProductType', title: '产品类型', width: '100', align: 'left', sortable: true }, { field: 'Num', title: '数量', width: '100', align: 'left', sortable: true }, { field: 'Storage', title: '所属仓库', width: '100', align: 'left', sortable: true }, { field: 'CompanyCode', title: '所属公司', width: '100', align: 'left', sortable: true }, { field: 'CreateBy', title: '操作人', width: '100', align: 'left', sortable: true }, ]], });
二、今天的重点，DataGrid行内编辑
如上效果图，我们在DataGrid行内直接变数据
Js代码如下：
如何实现行内编辑，需要在你所编辑的单元格中加入editor属性，editor属性有个type（他支持很多控件类型，可以到官网查看）就是编辑的控件类型。
比如说，上图中“入库状态”，首先我们定义数据源，json格式是重点。
var InboundStatus = [{ "value": "1", "text": "入库" }, { "value": "-1", "text": "待入库" }];
然后需要格式转换函数，不然你选择的时候只会显示value值，不是显示文本值。代码如下：
function unitformatter(value, rowData, rowIndex) { if (value == 0) { return; } for (var i = 0; i < InboundStatus.length; i++) { if (InboundStatus[i].value == value) { return InboundStatus[i].text; } } }
如何把数据源绑定到DataGrid列中，代码如下：
formatter：使用我们前面定义的转换格式函数。
options：中的data就是我们定义的数据源。
valueField:选中后的value值，不用详细解释了吧
textField：选中后显示的值，文本值。
type：combobox，就是下拉选项的样式。