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

尚無瀏覽量

#WPF

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