EasyUI：中datagrid数据表格的删除、编辑、保存、撤销功能实现

datagrid格式如下

需求

1. 编辑&＃xff1a;选中某一行后&＃xff0c;点击编辑可以修改该行"值"字段。

2. 保存&＃xff1a;编辑完成后&＃xff0c;点击保存数据保存。

3. 删除&＃xff1a;选中某一行后&＃xff0c;点击删除&＃xff0c;删除该数据

4. 撤销&＃xff1a; 撤销上一次删除

知识点

用到的easyUIAPI

1. checkbox&＃xff1a;复选框
2. fit&＃xff1a;冻结表头
3. fitColumns&＃xff1a;列宽度自适应
4. singleSelect&＃xff1a;行单选
5. onBeginEdit&＃xff1a;当某一行进入编辑模式的时候触发
6. onAfterEdit&＃xff1a;当某一行编辑完成后触发
7. $(&＃39;#dataanagrid-content-dg&＃39;).datagrid(&＃39;getData&＃39;)获取表格中的数据&＃xff0c;返回结果为对象{total&＃xff1a;xx&＃xff0c;row&＃xff1a;{}}
8. $(&＃39;#dataanagrid-content-dg&＃39;).datagrid(&＃39;getSelected&＃39;)获取选中行
9. $(&＃39;#dataanagrid-content-dg&＃39;).datagrid(&＃39;getRowIndex&＃39;, selectRow)获取选中行的索引
10. $(&＃39;#dataanagrid-content-dg&＃39;).datagrid(&＃39;beginEdit&＃39;, selectIndex);选中行进入编辑模式
11. $(&＃39;#dataanagrid-content-dg&＃39;).datagrid("deleteRow", selectIndex);删除选中行
12. $(&＃39;#dataanagrid-content-dg&＃39;).datagrid(&＃39;endEdit&＃39;, selectIndex);选中行退出编辑模式
13. $("#dataanagrid-content-dg").datagrid("insertRow", { index: deleteRowObj.index, row: deleteRowObj.row });在对应索引行插入数据
14. $("#dataanagrid-content-dg").datagrid("updateRow", {index: index,row: {"值": newItem,}});更新对应行数据
15. sessionStorage.setItem("deleteRowInfo", deleteRow);设置sessionStorage中deleteRowInfo值
16. sessionStorage.getItem("deleteRowInfo");获取sessionStorage中deleteRowInfo值
17. 字符串转json&＃xff1a;let deleteRowObj &＃61; JSON.parse(deleteRowInfo);
18. json转字符串&＃xff1a;let jsonRow &＃61; JSON.stringify(row);

代码

<button class&＃61;"sigle-button" onclick&＃61;"$UI.clickButton(&＃39;edit&＃39;)">编辑button>
<button class&＃61;"sigle-button" onclick&＃61;"$UI.clickButton(&＃39;delete&＃39;)">删除button>
<button class&＃61;"sigle-button" onclick&＃61;"$UI.clickButton(&＃39;save&＃39;)">保存button>
<button class&＃61;"sigle-button" onclick&＃61;"$UI.clickButton(&＃39;recall&＃39;)">撤销button>


$(&＃39;#dataanagrid-content-dg&＃39;).datagrid({checkbox: true,fit: true,fitColumns: true,singleSelect: true,idField: &＃39;传感器&＃39;,onBeginEdit: function (index, row) {sessionStorage.setItem("editDataFlag", "true");},onAfterEdit: function (index, row, changes) {let newItem &＃61; changes.值;newItem &＃61; newItem.replace(/(0&＃43;)$/g, "");if (newItem.indexOf(".") &＃61;&＃61;&＃61; newItem.length - 1) {newItem &＃61; newItem.substring(0, newItem.length - 1);}$("#dataanagrid-content-dg").datagrid("updateRow", {index: index,row: {"值": newItem,}});var row &＃61; $("#dataanagrid-content-dg").datagrid(&＃39;getData&＃39;).rows[index];let data &＃61; {&＃39;name&＃39;: row.传感器.split(":")[0],&＃39;paratype&＃39;: row.传感器.split(":")[1],&＃39;time&＃39;: row.时间,&＃39;unit&＃39;: row.单位,&＃39;data&＃39;: row.值}changeItemData(data, &＃39;edit&＃39;)sessionStorage.setItem("editDataFlag", "false");$(this).datagrid(&＃39;unselectRow&＃39;, index);}
});


clickButton &＃61; function (tag) {$.ajax({url: &＃39;/Search/GetAccountID&＃39;,type: &＃39;get&＃39;,dataType: &＃39;text&＃39;,async: false,success: function (response) {let selectRow, selectIndex;if (response !&＃61;&＃61; &＃39;管理员&＃39;) {editAlert("无权限操作&＃xff01;", 500);return;}if (window.sessionStorage.getItem(&＃39;dataAnaFlag&＃39;) !&＃61;&＃61; "原始数据生成") {editAlert("只可操作原始数据&＃xff01;", 1000);return;}if ($(&＃39;#dataanagrid-content-dg&＃39;).datagrid(&＃39;getData&＃39;).total &＃61;&＃61;&＃61; 0) {editAlert("请选择监测站与测计&＃xff01;", 1000);return;}if (tag !&＃61;&＃61; &＃39;recall&＃39; ) {selectRow &＃61; $(&＃39;#dataanagrid-content-dg&＃39;).datagrid(&＃39;getSelected&＃39;);selectIndex &＃61; $(&＃39;#dataanagrid-content-dg&＃39;).datagrid(&＃39;getRowIndex&＃39;, selectRow);if (selectRow.传感器.split(":")[1].indexOf("雨量") !&＃61;&＃61; -1) {alert("雨量数据不支持编辑与删除&＃xff01;")return;}}if (tag &＃61;&＃61;&＃61; &＃39;edit&＃39;) {let editDataFlag &＃61; window.sessionStorage.getItem("editDataFlag");if (editDataFlag &＃61;&＃61;&＃61; "true") {editAlert("请先保存上次更改数据&＃xff01;", 1000);return;}if (selectRow &＃61;&＃61;&＃61; null) {editAlert("请选择需要更改的数据&＃xff01;", 1000);return;}// 开始编辑$(&＃39;#dataanagrid-content-dg&＃39;).datagrid(&＃39;beginEdit&＃39;, selectIndex);} else if (tag &＃61;&＃61;&＃61; &＃39;delete&＃39;) {if (selectRow &＃61;&＃61;&＃61; null) {editAlert("请选择需要删除的数据&＃xff01;", 1000);return;}let row &＃61; $("#dataanagrid-content-dg").datagrid(&＃39;getData&＃39;).rows[selectIndex];$(&＃39;#dataanagrid-content-dg&＃39;).datagrid("deleteRow", selectIndex);let jsonRow &＃61; JSON.stringify(row);let deleteRow &＃61; &＃96;{"index":"${selectIndex}","row":${jsonRow}}&＃96;sessionStorage.setItem("deleteRowInfo", deleteRow);let data &＃61; {&＃39;name&＃39;: row.传感器.split(":")[0],&＃39;paratype&＃39;: row.传感器.split(":")[1],&＃39;time&＃39;: row.时间,&＃39;unit&＃39;: row.单位,&＃39;date&＃39;: row.值}changeItemData(data, &＃39;delete&＃39;)} else if (tag &＃61;&＃61;&＃61; &＃39;save&＃39;) {$(&＃39;#dataanagrid-content-dg&＃39;).datagrid(&＃39;endEdit&＃39;, selectIndex); } else if (tag &＃61;&＃61;&＃61; &＃39;recall&＃39;) {let deleteRowInfo &＃61; sessionStorage.getItem("deleteRowInfo");if (deleteRowInfo &＃61;&＃61;&＃61; null) {editAlert("未执行删除操作&＃xff01;", 1000);return;}let deleteRowObj &＃61; JSON.parse(deleteRowInfo);deleteRowObj.row.值 &＃61; Number(deleteRowObj.row.值);deleteRowObj.index &＃61; Number(deleteRowObj.index);$("#dataanagrid-content-dg").datagrid("insertRow", { index: deleteRowObj.index, row: deleteRowObj.row });sessionStorage.removeItem("deleteRowInfo");let data &＃61; {&＃39;name&＃39;: deleteRowObj.row.传感器.split(":")[0],&＃39;paratype&＃39;: deleteRowObj.row.传感器.split(":")[1],&＃39;time&＃39;: deleteRowObj.row.时间,&＃39;unit&＃39;: deleteRowObj.row.单位,&＃39;date&＃39;: deleteRowObj.row.值}changeItemData(data, &＃39;recall&＃39;)}}})}


/**
* 数据库操作
* &＃64;param {any} options 修改的数据
* &＃64;param {any} flag 删/改/增
*/
function changeItemData(options, flag) {let data &＃61; {&＃39;admi&＃39;: options.name,&＃39;item&＃39;: options.paratype,&＃39;time&＃39;: options.time,&＃39;data&＃39;: options.data,&＃39;type&＃39;: flag}$.ajax({url: &＃39;/Monitoring/changeItemData&＃39;,type: &＃39;post&＃39;,dataType: &＃39;text&＃39;,data: data,async: false,success: function (response) {if (response &＃61;&＃61; "1") {alert("操作成功!");} else if (response &＃61;&＃61; "1") {alert("操作失败!");}}})
}


/*** 弹窗* &＃64;param {any} msg 弹出语句* &＃64;param {any} time 延时*/
function editAlert(msg, time) {$.messager.show({title: &＃39;提示&＃39;,msg: msg,timeout: time,showType: &＃39;slide&＃39;,style: {top: document.body.scrollTop &＃43; document.documentElement.scrollTop}});
}