【jqxTable】列选择的实现

---

该案例是在angular8 下实装的

一、代码实装

1.htm

代码如下（示例）：把列点击事件加上

<jqxGrid  ... [scrollmode]="'deferred'" ... (onColumnclick)="onColumnclick($event)">
 </jqxGrid>

2.ts

代码如下（示例）：

...
@ViewChild('roomGrid', { static: false }) roomGrid: jqxGridComponent;
...
onColumnclick(event) {
    if(this.roomService.gridArea) {
      //清除画面中所有单元格的选中状态
      this.roomGrid.clearselection();
      //修改selection模式
      this.roomGrid.selectionmode('multiplecellsadvanced');
      //[scrollmode]="'deferred'" 模式下，数据是一次性全部加载到表中
      for(let i=0;i<this.dataAdapter.originaldata.length;i++) {
        //列选择的简单实现，调用【selectcell】该api即可，但数据量较大时画面响应时间较长
        //this.roomGrid.selectcell(i,event.args.datafield);
        //将jqxgrid中选中单元格的部分源码copy过来并进行少许修改
        let k = {
          rowindex: i,
          datafield: event.args.datafield
        };
        let h = `${i}_${event.args.datafield}`;
        this.roomGrid.widgetObject.selectedcells[h] = k;
        this.roomGrid.widgetObject.selectedcells.length++;
      }
      //数据插入完后需要重新刷新一下
      this.roomGrid.widgetObject._renderrows();
    }
  }

该函数执行完后，选择列下的所有单元格变为选择状态。

---

总结

总体而言实现起来并不难，但因为jqxgrid只提供了【selectcell】进行单个单元格选中状态更新，并未提供复数更新的接口，导致需要更新状态的单元格数量较多时，使用官方提供的接口执行时效率过慢。因此来提供一种方式提高效率。
ps:不排除因为这样修改而导致画面崩溃的情况，但最起码我现在使用状况良好。