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方法，