Отключить выделение для строк с определенными идентификаторами строк в сетке реагирования devexpress? - PullRequest
Новая
       46

Отключить выделение для строк с определенными идентификаторами строк в сетке реагирования devexpress?

0 голосов
/ 16 декабря 2018

Я работаю над сеткой реагирования devexpress, и я новичок в реакции.Мне нужно отключить выбор строк в зависимости от условия.Я борюсь здесь, чтобы отключить выбор определенных строк, а не всех строк.Пожалуйста, помогите мне.

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

Приведенная выше ссылка имеет демонстрационную версию для отключения выбора, если выбраны 3 строки.Но в моем сценарии флажок выбора должен быть включен только для rowid [0,1,5].Другие строки должны быть отключены для выбора по умолчанию.

1 Ответ

0 голосов
/ 18 декабря 2018

Я нашел ответ на свой вопрос по ссылке ниже. 

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

...