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