javascript - 使_children在数据树中不可选择-Tabulator React

Question

我需要可选择父行并禁用对子行的选择。我正在使用带有勾选框 formatter 选项的可选行来选择行。我尝试使用 selectableCheck，但它不适用于 tick formatter。

如能提供任何帮助，我们将不胜感激。请找到类似的代码框链接:我想禁用子元素的行选择复选框。

Codebox link

我附上了我需要的示例格式。

JSX

class Home extends Component {
  render() {
    const columns = [
      {
        formatter: "rowSelection",
        titleFormatter: "rowSelection",
        align: "center",
        headerSort: false,
        cellClick: function(e, cell) {
          cell.getRow().toggleSelect();
          console.log(cell.getRow(), cell.getRow().getTreeParent());
        }
      },
      { title: "Name", field: "name", width: 200 },
      { title: "Location", field: "location", width: 150 },
      { title: "Gender", field: "gender", width: 150 },
      { title: "Favourite Color", field: "col", width: 150 },
      {
        title: "Date Of Birth",
        field: "dob",
        align: "center",
        sorter: "date",
        width: 150
      }
    ];

    let data = [
      {
        name: "Oli Bob",
        location: "United Kingdom",
        gender: "male",
        col: "red",
        dob: "14/04/1984",
        _children: [
          {
            name: "Mary May",
            location: "Germany",
            gender: "female",
            col: "blue",
            dob: "14/05/1982"
          },
          {
            name: "Brendon Philips",
            location: "USA",
            gender: "male",
            col: "orange",
            dob: "01/08/1980",
            _children: [
              {
                name: "Margret Marmajuke",
                location: "Canada",
                gender: "female",
                col: "yellow",
                dob: "31/01/1999"
              },
            ]
          }
        ]
      },
      {
        name: "James Newman",
        location: "Japan",
        gender: "male",
        col: "red",
        dob: "22/03/1998"
      }
    ];

    let options = {
      layout: "fitColumns",
      dataTree: true,
      dataTreeStartExpanded: true,
      dataTreeElementColumn: "name"
    };

    return (
      <ReactTabulator
        ref={ref => (this.ref = ref)}
        data={data}
        columns={columns}
        tooltips={true}
        options={options}
      />
    );
  }
}

export default Home;

Answer 1

我没有探索过 react-tabulator 的 API(因为我的时间限制)，但我注意到cell.getRow().getTreeParent() 如果所选节点没有父节点，则返回 false。因此，基于此，您需要返回 cell.getRow().toggleSelect()。

那是你想要达到的目标吗？让我知道。

 cellClick: (e, cell) => {
      // console.log("obj: ", cell.getRow()._row.data);
      // console.log("getTreeParent: ", cell.getRow().getTreeParent());
      // if (cell.getRow()._row.data.hasOwnProperty("_children")) {
      //   return cell.getRow().toggleSelect();
      // }
      console.log("does this Row have children ? ", cell.getRow().getTreeParent());
      if (!cell.getRow().getTreeParent()) {
        return cell.getRow().toggleSelect();
      }
    }

旁注:hasOwnProperty()