wijmo的flexgrid

收藏

使用了selector之后，怎样在点击的时候选中的是选中一行的效果，而不是选中某一个单元格，求一个解决方案！！！！我试过操作dom，但是表格列很长的话，后面的列是没加载出来的，拖动滚动条，后面渲染出来的单元格就不会被选中。。也试过绑定一列来设置多选框，但是有分组的时候，deferUpdate有问题。选中分组的那个单元格，选中之后，选中的效果又立马消失。
import "@grapecity/wijmo.styles/wijmo.css";
import "bootstrap.css";
import "./app.css";
//
import * as React from 'react';
import * as ReactDOM from 'react-dom';
//
import * as wjcCore from "@grapecity/wijmo";
import * as wjcGrid from "@grapecity/wijmo.react.grid";
import { GroupRow } from "@grapecity/wijmo.grid"
import { getData } from "./data";
class App extends React.Component {
constructor(props) {
      super(props);
      this.state = {
         // data: getData(100),
         data: new wjcCore.CollectionView(getData(100), {
            // sortDescriptions: ["country", "product"],
            groupDescriptions: ["title","Priority"]
         })
      };
}
render() {
      return <div className="container-fluid">
         <wjcGrid.FlexGrid deferResizing={true} alternatingRowStep={0} headersVisibility="Column" selectionMode="Cell" itemsSource={this.state.data} initialized={this.initializeGrid.bind(this)}>

         </wjcGrid.FlexGrid>
      </div>;
}
initializeGrid(flex) {
      flex.formatItem.addHandler((s, e) => {
         console.log(s, e)
         if (e.panel == s.columnHeaders) {
            if (s.columns[e.col].binding == 'sel') {
                  e.cell.innerHTML = '<input class="select-all" tabindex="-1" type="checkbox">';
                  this._updateSelectAllBox(s);
            }
         }
         else if (s.rows[e.row] instanceof GroupRow) {
            e.cell.innerHTML = '<input class="select-group" tabindex="-1" type="checkbox">' + e.cell.innerHTML;
            this.groupAllSelectBox(s);
         }
         else if (e.panel == s.cells) {
            wjcCore.setAttribute(e.cell.parentElement, 'aria-selected', s.rows[e.row].dataItem.sel);
         }
      });
      // initialize column widths
      flex.autoSizeColumns(null, null, null, 18);
      // select/de-select all items when user clicks the check box on the header
      flex.hostElement.addEventListener('click', (e) => {
         if (wjcCore.hasClass(e.target, 'select-all') &&
            e.target instanceof HTMLInputElement) {
            flex.deferUpdate(() => {
                  flex.collectionView.items.forEach((item) => {
                     item.sel = (e.target).checked;
                  });
            });
         }
         if (wjcCore.hasClass(e.target, 'select-group') &&
            e.target instanceof HTMLInputElement) {
            // flex.deferUpdate(() => {
            //    flex.collectionView.groups[0].items.forEach((item) => {
            //       item.sel = (e.target).checked;
            //    });
            // });
         }
      });
}
_updateSelectAllBox(grid) {
      let cb = grid.hostElement.querySelector('.select-all');
      if (cb instanceof HTMLInputElement) {
         let items = grid.collectionView.items, last = null, indeterminate = false;
         for (let i = 0; i < items.length; i++) {
            if (last != null && items.sel != last) {
                  indeterminate = true;
                  break;
            }
            last = items.sel;
         }
         cb.checked = last;
         if (indeterminate) {
            cb.indeterminate = true;
         }
      }
}

groupAllSelectBox(grid){
      let cb = grid.hostElement.querySelector('.select-group');
      console.log(111,cb)
      if (cb instanceof HTMLInputElement) {
         let items = grid.collectionView.groups[0].items, last = null, indeterminate = false;
         console.log(222,items)
         for (let i = 0; i < items.length; i++) {
            if (last != null && items.sel != last) {
                  indeterminate = true;
                  break;
            }
            last = items.sel;
         }
         cb.checked = last;
         if (indeterminate) {
            cb.indeterminate = true;
         }
      }
}
}
ReactDOM.render(<App />, document.getElementById('app'));