dev datagridテーブルのチェックボックスchekboxの部分選択を実現します.

1242 ワード

先端 javascript アングラー typescript

アプリケーションシーン
デマンドの一部の行のデータは選択できません.
html

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.cell Element.find()方法はtsにこの方法がないと表示されますので、元のjsのquerySelector方法に変えます.

Eslent学習まとめ