esay-ui表格单元格编辑控制

 

esay-ui表格单元格编辑控制

目录

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 } })
		}
	}
})