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

332 瀏覽人次

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

執行結果: