Infragistics｜Ultimate UI JQuery｜啟用igGrid多行選擇時，如何能透過點擊行(Row)來切換行的選擇與否

278 瀏覽人次

2023-03-23 更新

如果您想在igGrid中啟用多行選擇，並透過點擊(Click)對「行」進行選擇與取消選擇的操作：

igGridRowSelectors checkBoxStateChanging 事件
igGridRowSelectors 的 rowSelectorClicked 事件
igGridSelection rowSelectionChanging 事件
igGrid cellClick 事件

在每個事件處理程序中:

如果點擊了Row Selector的核取方塊，就會讓igGrid進行處理。
如果點擊儲存格:
如果所選的Row包含點擊的Row，則會「取消選擇」，
如果所選的Row不包含點擊的Row，則會進行「選擇」。

請依循這樣的處理方法去執行。

但在實際上，由於事件發生順序與從各事件取得資訊的不同，需要有一個變數去儲存那些先行發生事件在處理上進行了何種操作，然後再與後來發生事件進行串接。

// 代表點擊Row Selector核取方塊的變數 var isFiredFromCheckbox;  // 代表是否發生依程式碼切換選擇的變數 var isSelectionOccured;  $("#grid1").igGrid({     // ....     features : [         {             name : "RowSelectors",             enableCheckBoxes: true,             enableRowNumbering: false,              checkBoxStateChanging: function (evt, ui) {                 // 更新在Row Selector點擊在核取方塊的變數值                 isFiredFromCheckbox = true;             },  // End of checkBoxStateChanging              rowSelectorClicked: function(evt, ui){                 // 如果依循程式碼切換選擇時                 if(isSelectionOccured){                     //當依循程式碼發生切換選擇時，代表將變數進行初始化。                     isSelectionOccured = false;                 }                 //如果依循程式碼，沒有切換選擇時                 // 亦即若只有一行被選中，並且該行被點擊的話。                 else{                     // rowSelectorClicked 取消選擇發生事件的那一行。                     $(ui.grid.element[0]).igGridSelection("deselectRowById", ui.rowKey);                 }             },  // End of rowSelectorClicked         },         {             name: "Selection",             mode: "row",             multipleSelection: true,              rowSelectionChanging: function(evt, ui){                 // 如果Row Selector中的核取方塊被點擊時                 if (isFiredFromCheckbox){                     // 該程式碼沒有什麼特別要說明的。                      // 初始化一個變數，代表Row Selector的核取方塊被點擊的狀態。                     isFiredFromCheckbox = false;                 }                 // 如果Row Selector上的核取方塊没有被點擊                 else{                     // 取得選定的Row。                     var selectedRows = ui.owner.selectedRows();                      // 在選定的Row中搜尋是否發生過rowSelectionChanging事件的Row。                     var found = false;                     for(var i = 0; i < selectedRows.length; i++){                         if (selectedRows[i].id == ui.row.id){                             found = true;                             break;                         }                     }                      // 如果在所選的Row中的任一Row有發生rowSelectionChanging事件。                     if(found){                         // 如果在所選的Row中，rowSelectionChanging事件沒有被發生的話。
                         ui.owner.deselectRowById(ui.row.id);                     }                     // 在rowSelectionChanging事件後取消選擇對於Row的選擇。                     else{                         // 發生rowSelectionChanging事件後對Row進行選擇。
                         ui.owner.selectRowById(ui.row.id);                     }                      // 當依據程式碼發生選擇時，代表變數更新。
                     isSelectionOccured = true;                      // 該事件被取消，因此預設動作不會被執行。                     return false;                 }             },  // End of rowSelectionChanging         }     ],      cellClick: function(evt,ui){         // 當依循程式碼發生切換選擇時         if(isSelectionOccured){             //當依循程式碼發生選擇時，代表變數初始化。             isSelectionOccured = false;         }         // 沒有發生依循程式碼切換選擇的情況時         // 也就是說，如果只有一行被選中，並且該行也被點擊的話。         else{             // 取消選擇發生cellClick的那一行。             $(ui.owner.element[0]).igGridSelection("deselectRowById", ui.rowKey);         }     } });

API reference

• igGrid

o 事件

 cellClick事件

• igGridRowSelectors

o 事件

 checkBoxStateChanging事件

 rowSelectorClicked事件

• igGridSelection

o Method

 deselectRowById Method

 selectedRows Method