接上一篇，这次介绍easyUI的datagrid的行内编辑单元格的功能。
关于行内编辑，我之前写过一个demo 《jQuery：页面可编辑表格》，但是easyui 中早已经封装了行内单元格编辑的功能，我们在调用时只需要使用人家封装好的方法就行。这里就使用封装好的方法。
实现思路：
1.定义table 时写上监听单击事件的方法：onClickCell:onClickCell；
2.将需要编辑的<th>和<td>设置编辑的触发响应：editor:‘text‘。其中text只是它的一种类型，也可以写combox或设置它的数据类型等。
3.响应onclickcell和editor的方法，编写js文件（详细见代码）。
<head>
@*引入的easyui的js和css*@
<script src="../../Content/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<link href="../../Content/themes/base/minified/jquery-ui.min.css" rel="stylesheet" />
<script src="../../Content/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
<link href="../../Content/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" />
<link href="../../Content/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" />
<script src="../../Content/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>
<title>企业经营管理人才类别情况统计表2 </title>
</head>
<body>
<div>
@* 定义table *@
<table id ="dg" class="easyui-datagrid" style="width: auto; height: auto;" title="企业经营管理人才类别情况统计表2" data-options="url:'/EnterpriseManagement2/FillData',fitColumns:true,singleSelect:true,pageSize:10,iconCls:'icon-edit',method:'get',onClickCell:onClickCell" sortname="CourseId" sortorder="asc" rownumbers="true" pagination="true">
@*复杂表头的处理，合并单元格*@
<thead>
<tr>
<th rowspan="2">项目</th>
<th rowspan="2">合计</th>
<th rowspan="2">女士</th>
<th colspan="5">学历</th>
<th colspan="6">年龄</th>
<th rowspan="2">自主创业</th>
<th rowspan="2">再就业人数</th>
<th rowspan="2">拥有专利人数</th>
<th rowspan="2">拥有执业资格人数</th>
</tr>
<tr>
<th >研究生</th>
<th >大学本科</th>
<th >大学专科</th>
<th >中专</th>
<th >高中及以下</th>
<th >35岁以下</th>
<th >36-40岁</th>
<th >41-45岁</th>
<th >46-50岁</th>
<th >51-54岁</th>
<th >55岁以上</th>
</tr>
<tr>
<th data-options="field:'sumID',width:137,align:'center'">甲</th>
<th data-options="field:'one',width:70,align:'center',editor:'text'">1</th>
<th data-options="field:'two',width:70,align:'center',editor:'text'">2</th>
<th data-options="field:'three',width:70,align:'center',editor:'text'">3</th>
<th data-options="field:'four',width:70,align:'center',editor:'text'">4</th>
<th data-options="field:'five',width:70,align:'center',editor:'text'">5</th>
<th data-options="field:'six',width:70,align:'center',editor:'text'">6</th>
<th data-options="field:'seven',width:70,align:'center',editor:'text'">7</th>
<th data-options="field:'eight',width:70,align:'center',editor:'text'">8</th>
<th data-options="field:'night',width:70,align:'center',editor:'text'">9</th>
<th data-options="field:'ten',width:70,align:'center',editor:'text'">10</th>
<th data-options="field:'eleven',width:70,align:'center',editor:'text'">11</th>
<th data-options="field:'twelve',width:70,align:'center',editor:'text'">12</th>
<th data-options="field:'thirteen',width:70,align:'center',editor:'text'">13</th>
<th data-options="field:'fourteen',width:70,align:'center',editor:'text'">14</th>
<th data-options="field:'fifteen',width:70,align:'center',editor:'text'">15</th>
<th data-options="field:'sixteen',width:85,align:'center',editor:'text'">16</th>
<th data-options="field:'seventeen',width:110,align:'center',editor:'text'">17</th>
</tr>
</thead>
</table>
@* 可编辑表格单机触发*@
<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)
.datagrid('editCell', { index: index, field: field });
editIndex = index;
}
}
</script>
</div>
效果：
时间： 2024-10-20 05:10:16