Infragistics｜IgniteUI｜根據特定欄位的「值」去動態調整 IgGrid 的 ColumnSettings 設定

尚無瀏覽量

2023-02-05 更新

在 IgGrid 裡，您可以對特定的「列」使用 columnSetting 選項，例如必須輸入資料（required）或唯讀（readOnly）的設定。

本文將說明如何透過動態調整 ColumnSetting的 ReadOnly 值，並試圖建立一個訂單管理應用程式的範例，並規定登録時間起算超過一小時後，禁用對所選產品的輸入與編輯。

$(function () {
    //igGrid
    $("#grid").igGrid({
        // ... (省略) ...
        columns: [
            { headerText: "ID", key: "ID", dataType: "number" },
            { headerText: "商品", key: "ProductID", dataType: "number", formatter: formatCategoryCombo },
            { headerText: "數量", key: "qty", dataType: "number" },
            { headerText: "描述", key: "description", dataType: "string" },
            { headerText: "登記日期", key: "SubmittedDate", dataType: "date", format: "yyyy/MM/dd HH:mm:ss", },
        ],
        dataSource: Orders,
        features: [
            {
                name: "Updating",
                editRowStarted: function(evt, ui){
                    if(ui.rowAdding){ // 新增加的 row
                        var editorSubmittedDate = ui.owner.editorForKey("SubmittedDate");
                        $(editorSubmittedDate).igDateEditor("value", new Date());
                    } else {
                        var present = new Date();
                        var get_an_hour_ago = new Date();
                        get_an_hour_ago.setHours(present.getHours() -1); //往前計算 1 小時
                        var cellValue = $("#grid").igGrid("getCellValue", ui.rowID, 'SubmittedDate'); //當前資料行的時間取得
                        if (get_an_hour_ago > cellValue) {
                            changeReadOnly(true,ui.rowID); //一小時前的登記資料不可編輯
                        }
                    }
                },
                editRowEnded: function (evt, ui) { //編輯結束後觸發的事件
                    changeReadOnly(false); //編輯完成後，轉換為 readonly
                },
                // ... (省略) ...
            }
        ]
    }); 

});

function changeReadOnly(readBool,rowID = NaN) {
    var updatingColumnSettings = $("#grid").igGridUpdating("option", "columnSettings");
    updatingColumnSettings[1].readOnly = readBool;
    updatingColumnSettings[2].readOnly = readBool;
    $("#grid").igGridUpdating("option", "columnSettings", $.extend(true, [], updatingColumnSettings));
    if (readBool) { //透過 igGridUpdating 事件，在結束編輯時，做畫面上的行為轉換
        $("#grid").igGridUpdating("startEdit", rowID, "ReadOnly");
    }
}

執行結果: