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

datagrid格式如下

需求

1. 编辑：选中某一行后，点击编辑可以修改该行"值"字段。

2. 保存：编辑完成后，点击保存数据保存。

3. 删除：选中某一行后，点击删除，删除该数据

4. 撤销： 撤销上一次删除

知识点

用到的easyUIAPI

1. checkbox：复选框
2. fit：冻结表头
3. fitColumns：列宽度自适应
4. singleSelect：行单选
5. onBeginEdit：当某一行进入编辑模式的时候触发
6. onAfterEdit：当某一行编辑完成后触发
7. $('#dataanagrid-content-dg').datagrid('getData')获取表格中的数据，返回结果为对象{total：xx，row：{}}
8. $('#dataanagrid-content-dg').datagrid('getSelected')获取选中行
9. $('#dataanagrid-content-dg').datagrid('getRowIndex', selectRow)获取选中行的索引
10. $('#dataanagrid-content-dg').datagrid('beginEdit', selectIndex);选中行进入编辑模式
11. $('#dataanagrid-content-dg').datagrid("deleteRow", selectIndex);删除选中行
12. $('#dataanagrid-content-dg').datagrid('endEdit', 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：let deleteRowObj = JSON.parse(deleteRowInfo);
18. json转字符串：let jsonRow = JSON.stringify(row);

代码

<button class="sigle-button" onclick="$UI.clickButton('edit')">编辑</button>
<button class="sigle-button" onclick="$UI.clickButton('delete')">删除</button>
<button class="sigle-button" onclick="$UI.clickButton('save')">保存</button>
<button class="sigle-button" onclick="$UI.clickButton('recall')">撤销</button>

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

clickButton = function (tag) {
   $.ajax({
        url: '/Search/GetAccountID',
        type: 'get',
        dataType: 'text',
        async: false,
        success: function (response) {
            let selectRow, selectIndex;
            if (response !== '管理员') {
                editAlert("无权限操作！", 500);
                return;
            }
            if (window.sessionStorage.getItem('dataAnaFlag') !== "原始数据生成") {
                editAlert("只可操作原始数据！", 1000);
                return;
            }
            if ($('#dataanagrid-content-dg').datagrid('getData').total === 0) {
                editAlert("请选择监测站与测计！", 1000);
                return;
            }
            if (tag !== 'recall' ) {
                selectRow = $('#dataanagrid-content-dg').datagrid('getSelected');
                selectIndex = $('#dataanagrid-content-dg').datagrid('getRowIndex', selectRow);
                if (selectRow.传感器.split(":")[1].indexOf("雨量") !== -1) {
                    alert("雨量数据不支持编辑与删除！")
                    return;
                }
            }
            if (tag === 'edit') {
                let editDataFlag = window.sessionStorage.getItem("editDataFlag");
                if (editDataFlag === "true") {
                    editAlert("请先保存上次更改数据！", 1000);
                    return;
                }
                
                if (selectRow === null) {
                    editAlert("请选择需要更改的数据！", 1000);
                    return;
                }
                
                // 开始编辑
                $('#dataanagrid-content-dg').datagrid('beginEdit', selectIndex);

            } else if (tag === 'delete') {
                if (selectRow === null) {
                    editAlert("请选择需要删除的数据！", 1000);
                    return;
                }
                let row = $("#dataanagrid-content-dg").datagrid('getData').rows[selectIndex];
                $('#dataanagrid-content-dg').datagrid("deleteRow", selectIndex);
                let jsonRow = JSON.stringify(row);
                let deleteRow = `{"index":"${selectIndex}","row":${jsonRow}}`
                sessionStorage.setItem("deleteRowInfo", deleteRow);
                let data = {
                    'name': row.传感器.split(":")[0],
                    'paratype': row.传感器.split(":")[1],
                    'time': row.时间,
                    'unit': row.单位,
                    'date': row.值
                }
                changeItemData(data, 'delete')
            } else if (tag === 'save') {
                $('#dataanagrid-content-dg').datagrid('endEdit', selectIndex); 
            } else if (tag === 'recall') {
                let deleteRowInfo = sessionStorage.getItem("deleteRowInfo");
                if (deleteRowInfo === null) {
                    editAlert("未执行删除操作！", 1000);
                    return;
                }
                let deleteRowObj = JSON.parse(deleteRowInfo);
                deleteRowObj.row.值 = Number(deleteRowObj.row.值);
                deleteRowObj.index = Number(deleteRowObj.index);
                $("#dataanagrid-content-dg").datagrid("insertRow", { index: deleteRowObj.index, row: deleteRowObj.row });
                sessionStorage.removeItem("deleteRowInfo");
                let data = {
                    'name': deleteRowObj.row.传感器.split(":")[0],
                    'paratype': deleteRowObj.row.传感器.split(":")[1],
                    'time': deleteRowObj.row.时间,
                    'unit': deleteRowObj.row.单位,
                    'date': deleteRowObj.row.值
                }
                changeItemData(data, 'recall')
            }
        }
    })
    
}

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

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