dev實現datagrid表格中複選框chekbox部分選中

應用場景

需求中部分行數據不可選

html

<dx-data-grid id="loadFileGridContainer" #Container [dataSource]="Src" noDataText="There is no satisfied data." (onCellPrepared)="onCellPrepared($event)" (onSelectionChanged)="onSelectionChanged($event)">
    <dxo-selection mode="multiple"></dxo-selection>
</dx-data-grid>

ts

import  CheckBox  from 'devextreme/ui/check_box';
onCellPrepared(e){  
    if(e.rowType === 'data' && e.column.command === 'select' && this.disabledValues.indexOf(e.data.ID) > -1){
      let instance = CheckBox.getInstance(e.cellElement.querySelector('.dx-select-checkbox'));
      instance.option('disabled',true);  
    }
  }
  onSelectionChanged(e){
    let that = this,disabledKeys;
    var disabledKeys = e.currentSelectedRowKeys.filter(i=>that.disabledValues.indexOf(i.ID)>-1);

    if(disabledKeys.length > 0){
      e.component.deselectRows(disabledKeys) 
    }
  }

參考的是官網的解決辦法，其實在個人需求中，稍微複雜一些，遇到一些問題，其中CheckBox.getInstance(e.cellElement.querySelector('.dx-select-checkbox'));這個方法就搞了2個小時，由於官網上給的解決方案是

var instance = e.cellElement.find('.dx-select-checkbox).dxCheckBox('instance');

e.cellElement.find()方法在ts中顯示沒有這個方法，因此改用原生js的querySelector方法，