Question

我正在开发devexpress 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

Answer 2

对于感兴趣的任何人，我都可以通过以下操作来实现这一目标。

render() {

    const {...restProps} = this.props;


    return (

            ...
                <TableSelection cellComponent={this._selectableRow} 
                {...restProps}
                />
            ... 

    );
}

...
    _selectableRow(props) 
 {
    const {...restProps} = props;
    return props.row.type === "folder" ? <Table.StubCell/> : <TableSelection.Cell {...restProps}/> 
}

在devexpress react Grid中禁用对具有特定行ID的行的选择？

2 个答案: