技术文章

如果您想在 igGrid 中启用多行选择并单击一行以选择/取消选择该行：

• igGridRowSelectors checkBoxStateChanging 事件

• igGridRowSelectors 的 rowSelectorClicked 事件

• igGridSelection rowSelectionChanging 事件

• igGrid cellClick 事件

在每个事件处理程序中

• 如果单击了行选择器复选框，则让 igGrid 处理它。

• 如果单击单元格，

• 如果所选行包含单击的行，则取消选择它，

• 如果所选行不包含单击的行，则选择它。

请执行流程。

现实中，由于事件发生的顺序和每个事件所能获取的信息不同，需要在一个变量中存储先发生的事件处理程序中发生了哪些操作，并匹配与后来发生的事件。有。

// 指示行选择器复选框被单击的变量

var isFiredFromCheckbox;

// 指示代码中是否发生选择切换的变量

var isSelectionOccured;

$ ( "#grid1" ) . igGrid ( {

   // ....

   特点：[

       {

           名称：“行选择器” ，

           enableCheckBoxes: true ,

           enableRowNumbering: false ,

           checkBoxStateChanging：函数（evt，ui ）{

               // 更新指示行选择器复选框被单击的变量的值。

               isFiredFromCheckbox = true ;

           } ,   // checkBoxStateChanging 结束

           rowSelectorClicked：函数（evt，ui ）{

               // 如果代码切换选择

               如果（isSelectionOccured ）{

                   // 初始化一个变量，表示发生了代码选择切换

                   isSelectionOccured = false ;

               }

               // 如果代码没有切换选择

               // 即如果只选择了一行并单击了该行

               否则{

                   // 取消选择触发 rowSelectorClicked 事件的行。

                   $ ( ui.grid.element [ 0 ] ) . igGridSelection ( " deselectRowById " , ui.rowKey ) ; _

               }

           } ,   // rowSelectorClicked 结束

       } ,

       {

           名称：“选择” ，

           模式：“行” ，

           多选：真，

           rowSelectionChanging：函数（evt，ui ）{

               // 如果行选择器复选框被点击

               如果（isFiredFromCheckbox ）{

                   // 在代码中什么都不做。

                   // 初始化一个变量，指示行选择器复选框的单击状态。

                   isFiredFromCheckbox = false ;

               }

               // 如果行选择器复选框没有被点击

               否则{

                   // 获取选中的行。

                   var selectedRows = ui.owner.selectedRows ( ) ; _

                   // 判断选中的行中是否有发生rowSelectionChanging事件的行。

                   var found = false ;

                   for ( var i = 0 ; i < selectedRows.length ; i++ ) {

                       如果( selectedRows [ i ] .id == ui.row.id ) { _ _ _

                           发现=真；

                           打破;

                       }

                   }

                   // 如果选中的行中有发生rowSelectionChanging事件的行

                   如果（找到）{

                       // 取消选择触发 rowSelectionChanging 事件的行

                       ui.owner.deselectRowById ( ui.row.id ) ; _ _ _ _ _ _

                   }

                   // 如果没有选中的行有 rowSelectionChanging 事件

                   否则{

                       // 选择触发 rowSelectionChanging 事件的行。

                       ui.owner.selectRowById ( ui.row.id ) ; _ _ _ _ _ _

                   }

                   // 更新一个变量以指示代码选择已经发生。

                   isSelectionOccured = true ;

                   // 取消事件并阻止默认行为起作用。

                   返回假；

               }

           } ,   // rowSelectionChanging结束

       }

   ] ,

   cellClick:函数( evt, ui ) {

       // 如果代码切换选择

       如果（isSelectionOccured ）{

           // 初始化一个变量以指示代码选择发生。

           isSelectionOccured = false ;

       }

       // 如果代码没有切换选择

       // 即如果只选择了一行并单击了该行

       否则{

           //取消选择发生cellClick的行

           $ ( ui.owner.element [ 0 ] ) . igGridSelection ( " deselectRowById " , ui.rowKey ) ; _

       }

   }

} ) ;

请注意，此方法的实现取决于截至 2020 年 5 月 28 日每个事件的发生顺序。事件发生顺序可能因版本升级而发生变化，升级时请进行充分的运行确认测试。