利用EasyUI做的可编辑的DataGrid大致分为两种类型。一种是启动行编辑的，一种是启动单元格编辑。且不说启动编辑的效果怎样。单启动编辑这一块它就封装的非常厉害。好些功能没有办法去更改。如今项目的一个需求就是在页面上使得DataGrid能够实现这种效果，单击选中行，双击可编辑单元格，失去焦点则保存数据。在研究了整整两天之后，大致能实现。可是差失去焦点保存数据。这篇文章就简单理解一下。可启动单元格编辑的DataGrid是怎样实现的。
首先得加入EasyUI的引用：
<span style="font-family:KaiTi_GB2312;font-size:18px;"> <link href="../../Content/EasyUI/easyui.css" rel="stylesheet" type="text/css" />
<link href="../../Content/EasyUI/icon.css" rel="stylesheet" type="text/css" />
<link href="../../Content/EasyUI/demo.css" rel="stylesheet" type="text/css" />
<script src="../../Content/EasyUI/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../../Content/EasyUI/jquery.easyui.min.js" type="text/javascript"></script></span>
其次是表格的代码：
<span style="font-family:KaiTi_GB2312;font-size:18px;"> <table id="dg" title="管理员管理查询结果" style=" auto; height: auto"; data-options="onDblClickCell:onClickCell"> @*onDblClickCell指的是双击单元格进行编辑，假设须要单击进行编辑。就改为onClickCell*@
<thead>
<tr>
<th data-options="field:'AdminID',100">管理员工号</th>
<th data-options="field:'AdminName',100,editor:'text'">姓名</th>
<th data-options="field:'AdminPWD',80,align:'right',editor:{type:'numberbox',options:{precision:1}}">password</th>
<th data-options="field:'AdminLevel',80,align:'right',editor:'text'">权限</th>
<th data-options="field:'IsUsed',60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">是否可用</th>
</tr>
</thead>
</table></span>最后是JS代码：
<span style="font-family:KaiTi_GB2312;font-size:18px;"><script type="text/javascript" src="/easyui/datagrid-cellediting.js"></script></span>
<span style="font-family:KaiTi_GB2312;font-size:18px;"> <script type="text/javascript">
function initTable() {
$("#dg").datagrid({
url: "Series/QueryBy", //调用的SeriesController中的QueryBy方法
"100%", //宽度适应浏览器大小
fitColumns: true, //列宽自适应
idField: 'ID',
loadMsg: '正在载入用户信息...',
pagination: true, //是否分页显示
singleSelect: false, //仅仅能选中一条数据
striped: true, //行背景交换
pageSize: 10, //每一页的大小
pageNumber: 1, //当前页数
pageList: [10, 20, 30], //每一页显示的条数
queryParams: {
searchName: $("searchName").val()
},
columns: [[ //这段代码是给DataGrid列赋值。field就是每一列相应的字段名，title是每一列显示的列首
{ field: 'ck', checkbox: true, align: 'left', 50 },
{ field: 'ID', title: '主键', 50, hidden: true },
{ field: 'AdminID', title: '管理员工号', 50 },
{ field: 'AdminPassword', title: 'password', 50, hidden: true, editor: 'text' },
{ field: 'AdminName', title: '姓名', 50, editor: 'text' },
{ field: 'AdminLevel', title: '权限', 50, editor: 'text' },
{ field: 'IsUsed', title: '是否使用', 55, editor: 'text' }
]]
});
}
$(function () {
initTable();
});
</script></span><span style="font-family:KaiTi_GB2312;font-size:18px;"> <script type="text/javascript">
$.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 }
if ($('#dg').datagrid('validateRow', editIndex)) {
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickCell(index, field) {
if (endEditing()) {
$('#dg').datagrid('selectRow', index) //有这句话则编辑是该行为选中状态，没有这句话则编辑是该行不是选中状态
$('#dg').datagrid('editCell', { index: index, field: field });
editIndex = index;
$('#datagrid-cell').blur( 'editCell',alert("adafsdf"));
}
}
</script></span>
总结
EasyUI有非常多方法都是内部封装的，比方editCell、selectRow等。根本看不出来它详细是怎样实现的。在牛腩、Jquery中。实现可编辑的表格都是自己手写一个表格。然后对表格进行操作，即编辑单元格时，插入一个文本框，编辑结束则文本框隐藏。同一时候也能使用获取焦点和失去焦点的事件。而在这里，当单击或双击单元格进行编辑时。单击或双击完了，单元格就已经失去状态了。并且单元格失去焦点的事件非常难把控。希望大神能够指导一二。