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

infragistics log

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


執行結果:


由上圖執行結果可知,有按我們預期程序來執行程式。

本文建立的範例程式碼可從下列網址取得:

根據特定欄位的「值」去動態調整igGrid的columnSettings設定



延伸閱讀
aa71435723的大頭照
Winston

Eggplant DAI 自動化測試專家。

留言