reactjs - 在 devexpress react 网格中禁用具有特定行 ID 的行的选择？

Question

我正在开发 devexpress React Grid，我是 React 的新手。我需要根据条件禁用行选择。我在这里努力禁用特定行而不是所有行的选择。请帮我。

https://stackblitz.com/edit/react-deg9yu?file=index.js

如果选择了 3 行，上面的链接有禁用选择的演示。但在我的场景中，应该只为 rowid [0,1,5] 启用选择复选框。默认情况下应禁用其他行以供选择。

Answer 1

我在下面的链接中找到了问题的答案。

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  Getter,
  Plugin
} from '@devexpress/dx-react-core';
import {
  SelectionState,
  IntegratedSelection
} from '@devexpress/dx-react-grid';
import {
  Grid,
  Table,
  TableHeaderRow,
  TableSelection
} from '@devexpress/dx-react-grid-bootstrap3';

const filters = [0,2,5];

const columns = [
  { name: 'id', title: 'ID' },
  { name: 'product', title: 'Product' },
  { name: 'owner', title: 'Owner' },
];
const rows = [
  { id: 0, product: 'DevExtreme', owner: 'DevExpress' },
  { id: 1, product: 'DevExtreme Reactive', owner: 'DevExpress' },
  { id: 2, product: 'DevExtreme Reactive 1', owner: 'DevExpress' },
  { id: 3, product: 'DevExtreme Reactive 2', owner: 'DevExpress' },
   { id: 4, product: 'DevExtreme', owner: 'DevExpress' },
  { id: 5, product: 'DevExtreme Reactive', owner: 'DevExpress' },
  { id: 6, product: 'DevExtreme Reactive 1', owner: 'DevExpress' },
  { id: 7, product: 'DevExtreme Reactive 2', owner: 'DevExpress' },
];
const rowSelectionEnabled = row => row.product === 'DevExtreme' ; 




class PatchedIntegratedSelection extends React.PureComponent {   
  render() {    
    const { rowSelectionEnabled, ...restProps } = this.props;
    return (
      <Plugin>
        <Getter
          name="rows"
          computed={({ rows }) => {
            this.rows = rows;
            return rows.filter(rowSelectionEnabled);
          }}
        />
        <IntegratedSelection {...restProps} />
        <Getter
          name="rows"
          computed={() => this.rows}
        />
      </Plugin>
    )
  }
};

class PatchedTableSelection extends React.PureComponent {
  render() {
    const { rowSelectionEnabled, ...restProps } = this.props;
    return (
      <TableSelection
        cellComponent={(props) => this.props.rowSelectionEnabled(props.tableRow.row) ? (
          <TableSelection.Cell {...props} />
        ) : (
          <Table.StubCell {...props} />
        )}
        {...restProps}
      />
    );
  }
}


export default class App extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      selection: []
    };

    this.changeSelection = selection => this.setState({ selection });
  }
  render() {
    const { selection } = this.state;   
    return (
      <div>
        <span>Selection: {JSON.stringify(selection)}</span>
        <Grid
          rows={rows}
          columns={columns}
        >
          <SelectionState
            selection={selection}
            onSelectionChange={this.changeSelection}
          />
          <PatchedIntegratedSelection
            rowSelectionEnabled={rowSelectionEnabled}
          />
          <Table />
          <TableHeaderRow />
          <PatchedTableSelection
            showSelectAll
            rowSelectionEnabled={rowSelectionEnabled}
          />
        </Grid>
      </div>
    );
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

链接: https://github.com/DevExpress/devextreme-reactive/issues/1706