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.binding == 'sel') {
e.cell.innerHTML = '<input class="select-all" tabindex="-1" type="checkbox">';
this._updateSelectAllBox(s);
}
}
else if (s.rows 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.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.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'));
你如果是需要按行选中的话设置selectionMode=3即可，selectionMode没办法和selector共存，这个目前没有什么解决办法 Richard.Ma 发表于 2022-7-4 12:09
你如果是需要按行选中的话设置selectionMode=3即可，selectionMode没办法和selector共存，这个目前没有什么 ...
那设置多选框为一列，使用deferUpadate，分组行的多选框被勾选之后又被刷新了，有的解决办法嘛 我没理解你说的意思，能否详细说明一下
页:
[1]