应用场景
需求中部分行数据不可选
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方法,
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。