esay-ui表格单元格编辑控制
目录
单元格数据不允许编辑操作
需求说明:
1. 点击表格行,表格行中指定列进入编辑状态,可以编辑选择
2. 指定表格行中某一列中的某一个单元格的数据不可更改,即不可更改指定列的已有数据,允许更改新增数据
这里表格的Product被设置为不允许修改已有数据,允许修改空数据,ItemID列设置为不允许编辑,其他列可自由编辑。
代码分享
<table id="dg" class="easyui-datagrid" title="Row Editing DataGrid" style="width:700px;height:auto"
data-options="
iconCls: 'icon-edit',
singleSelect: true,
toolbar: '#tb'
">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'userid',width:100,
formatter:function(value,row){
return row.productname;
},
editor:{
type:'combobox',
options:{
valueField:'userid',
textField:'username',
url:'../datagrid/products.json',
data: [{'userid': 1, 'username': '张三'}, {'userid': 2, 'username': '李四'}],
onSelect: onSelect
}
}">填报人</th>
<th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
<th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
<th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
</tr>
</thead>
</table>
<div id="tb" style="height:auto">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">Append</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="remove()">Remove</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">Accept</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a>
</div>
逻辑处理
var editIndex = undefined;
var editRow = undefined;
$(function() {
$('#dg').datagrid('appendRow',{itemid: 1, userid: 1, listprice: 123, unitcost: 123, attr1: 'abc', status:'P'});
$('#dg').datagrid({
onClickRow: function(index, row) {
// 在这这里进行判断当前行是否是正在编辑的行
if (editIndex != index) {
// 设置当前行为编辑状态,其他行为非编辑状态
// ...
} else {
// ...
}
editIndex = index
editRow = row
// 调用编辑index行的API,进入行编辑状态
$('#dg').datagrid('beginEdit', index);
}
})
})
function onSelect(record) {
// 如果编辑行编辑旧数据,则不允许更改
if (editRow.userid&& editRow.userid!= record.userid) {
// 获取当前正在编辑的index行的userid列的单元格对象
var ed = $('#dg').datagrid('getEditor', {index: editIndex, field: 'userid'});
// 重新设置单元格的值为原始数据的值
$(ed.target).combobox('setValue', 1);
alert('不允许更改原始数据')
} else {
// ...
}
}
行编辑后对比编辑前后数据是否一致,并更新行数据
需求说明:编辑行数据后对比编辑前后的数据是否一致,如果不一致说明行数据已被更改,修改flag字段标注改行字段已更改
代码分享
<table
id="table"
class="easyui-datagrid"
title="表格行编辑"
style="width:700px;height:auto"
></table>
逻辑处理
var editIndex = undefined;
var editRow = undefined;
var options = [
{ userid: 1, username: '张三' },
{ userid: 2, username: '李四' }
]
$('#table').datagrid({
columns: [
[{
field: 'id',
title: 'ID',
rowspan: 1,
width: 90,
sortable: true,
align: 'center'
}, {
field: 'userid',
title: '填表人',
rowspan: 1,
width: 200,
sortable: true,
align: 'center',
formatter: function(value, row, index) {
return options.find(
item => item.userid == row.userid
).username
},
editor: {
type:'combobox',
options: {
valueField: 'userid',
textField: 'username',
data: options
},
required:true
}
}, {
field: 'remark',
title: '备注',
rowspan: 1,
width: 400,
sortable: true,
align: 'center',
editor: 'text'
}, {
field: 'flag',
title: '标识',
rowspan: 1,
width: 400,
hidden: true
}]
],
striped: true,
data: [
{ id: 1, userid: 1, flag: 0, remark: '备注1' },
{ id: 2, userid: 2, flag: 0, remark: '备注2' }
],
onClickRow: function(index, row) {
if (editIndex != index){
if ($('#table').datagrid('validateRow', editIndex)) {
$('#table').datagrid('endEdit', editIndex)
$('#table').datagrid('beginEdit', index)
editIndex = index;
}
}
editRow = JSON.parse(JSON.stringify(row))
},
onAfterEdit: function(index, row, current) {
if (editRow.userid !== row.userid ||
editRow.remark !== row.remark) {
$('#table').datagrid('updateRow', { index: editIndex, row: { flag: 1 } })
}
}
})