Kendo React Treelist - 根据外部下拉选择选择/取消选择复选框列的值

如何解决Kendo React Treelist - 根据外部下拉选择选择/取消选择复选框列的值

我有一个共享组件 TreeList，如下所示： TreeList.jsx

<KendoTreeList
        style={getStyle()}
        tableProps={{ ref: table => (thisTable = table) }}
        rowHeight={rowHeight}
        scrollable="virtual"
        data={processData()}
        expandField={EXPAND_FIELD}
        subItemsField={SUB_ITEMS_FIELD}
        onExpandChange={onExpandChange}
        sortable
        onSortChange={handleSortChange}
        sort={sort}
        columns={columnDeFinitions}
        resizable
        onColumnResize={onColumnResize}
        roWrender={renderRow}
        dataItemKey={idField}
        columnMenuFilter={filter}
        onColumnMenuFilterChange={handleFilterChange}
        reorderable
        onColumnReorder={onColumnReorder}
        selectedField={selectedField}
        onSelectionChange={handleSelectionChange}
        onHeaderSelectionChange={handleHeaderSelectionChange}
      />

在此演示中实现了从 props 访问的值和复选框的方法：https://www.telerik.com/kendo-react-ui/components/treelist/selection/#toc-customizing-the-selection

现在，选择和取消选择在正常情况下工作正常，但我无法根据外部下拉列表中的值实现这一点。因此，例如，我有一个带有选项 1、选项 2 和选项 3 的外部下拉列表。如果用户选择了选项 1，则上述组件将从我的下拉组件接收其值作为道具，例如 {{1} }，如果我在树列表中选择了几条记录。现在，如果我将下拉列表的选择更改为选项 2，我希望取消选择所有复选框。我无法做到这一点。

任何建议都会有所帮助。 TIA。

解决方法

我已添加 selectedOption 作为您的 TreeList 组件的道具。

App 组件：

import * as React from "react";
import * as ReactDOM from "react-dom";
import MyTreeList from "./TreeList";
import { DropDownList } from "@progress/kendo-react-dropdowns";
import { Label } from '@progress/kendo-react-labels';

class App extends React.Component {
  options = ["Option 1","Option 2","Option 3"];
  state = { selectedOption: '' };

  onChange = (e) => {
    this.setState({selectedOption: e.value});
  }

  render() {
    return (
      <div>
        <Label>Your option:&nbsp;</Label>
        <DropDownList data={this.options} onChange={(e) => this.onChange(e)}/>
        <br />
        <br />
        <MyTreeList selectedOption={this.state.selectedOption}/>
      </div>
    );
  }
}

ReactDOM.render(<App />,document.querySelector("my-app"));

使用 componentDidUpdate 钩子，我已经检查了您的选择并根据您的需要更新了列表。

TreeList 组件：

import * as React from "react";
import {
  TreeList,mapTree,extendDataItem,TreeListSelectionCell,TreeListHeaderSelectionCell
} from "@progress/kendo-react-treelist";
import employees from "./data";

const subItemsField = "employees";
const expandField = "expanded";
const selectField = "selected";

export default class MyTreeList extends React.Component {
  state = {
    data: employees.slice(),expanded: [1,2,32],selected: []
  };

  handleRowClick = e => {
    const selected = e.dataItem.selected
      ? this.state.selected.filter(x => x !== e.dataItem.id)
      : [...this.state.selected,e.dataItem.id];

    this.setState({ selected });
  };

  onExpandChange = e => {
    this.setState({
      expanded: e.value
        ? this.state.expanded.filter(id => id !== e.dataItem.id)
        : [...this.state.expanded,e.dataItem.id]
    });
  };
  updateFields = dataArr => {
    const { expanded,selected } = this.state;
    return mapTree(dataArr,subItemsField,item =>
      extendDataItem(item,{
        expanded: expanded.includes(item.id),selected: selected.includes(item.id)
      })
    );
  };
  onSelectionChange = event => {
    this.changeSelection(event.dataItem);
  };

  changeSelection = dataItem => {
    const selected = dataItem.selected
      ? this.state.selected.filter(x => x !== dataItem.id)
      : [...this.state.selected,dataItem.id];

    this.setState({ selected });
  };

  onRowClick = event => {
    this.changeSelection(event.dataItem);
  };

  onHeaderSelectionChange = event => {
    const checked = event.syntheticEvent.target.checked;
    const selected = [];
    if (checked) {
      mapTree(this.state.data,item => {
        selected.push(item.id);
        return item;
      });
    }

    this.setState({ selected });
  };

  headerSelectionValue = () => {
    let allSelected = true;
    const selected = this.state.selected;
    mapTree(this.state.data,item => {
      allSelected = allSelected && selected.includes(item.id);
      return item;
    });
    return allSelected;
  };

  clearSelection() {
    this.setState({ selected: [] });
  }

  componentDidUpdate(prevProps) {
    if (prevProps.selectedOption !== this.props.selectedOption) {
      var selectedOption = this.props.selectedOption;
      switch (selectedOption) {
        case "Option 1":
          this.setState({ selected: [1,3] });
          break;
        case "Option 2":
          this.clearSelection();
          break;
        case "Option 3":
          break;
      }
    }
  }

  render() {
    return (
      <div>
        <TreeList
          style={{ maxHeight: "510px",overflow: "auto" }}
          data={this.updateFields(this.state.data)}
          selectedField={selectField}
          onSelectionChange={this.onSelectionChange}
          onHeaderSelectionChange={this.onHeaderSelectionChange}
          onRowClick={this.onRowClick}
          expandField={expandField}
          subItemsField={subItemsField}
          onExpandChange={this.onExpandChange}
          columns={[
            {
              field: "selected",width: "7%",headerSelectionValue: this.headerSelectionValue(),cell: TreeListSelectionCell,headerCell: TreeListHeaderSelectionCell
            },{ field: "name",title: "Name",expandable: true,width: "31%" },{ field: "position",title: "Position",{
              field: "hireDate",title: "Hire Date",format: "{0:d}",width: "31%"
            }
          ]}
        />
      </div>
    );
  }
}

工作演示在StackBlitz。