文章分類/

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

0 次瀏覽
2023-03-23 更新

infragistics log

如果您想在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

selectRowById Method

o 事件

rowSelectionChanging事件

快速跳轉目錄

✦ 群昱 AccessSoft 你的全面軟體解決方案 ✦

身為全球眾多知名軟體在台灣合作夥伴,歡迎諮詢你需要的軟體服務!

Picture of 軟體專家
軟體專家

群昱作為全球知名軟體推薦合作夥伴,致力於提供更多軟體解決方案給你!

更多軟體新知

立即詢價

請留下完整資訊,以便我們提供精確的服務內容給你。

詢價資訊