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

Question

我需要选择父行并禁用子行的选择。我正在使用带有复选框formatter 选项的可选行进行行选择。我尝试使用selectableCheck，但它不适用于勾选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()

Answer 2

自定义formatter 以仅对父母启用rowSelection。

{
        formatter: function(cell) {
          //cell - the cell component
          if (cell.getRow().getTreeParent()) {
            return;
          } else {
            var checkbox = document.createElement('input');

            checkbox.type = 'checkbox';
            if (this.table.modExists('selectRow', true)) {
              checkbox.addEventListener('click', e => {
                e.stopPropagation();
              });

              if (typeof cell.getRow == 'function') {
                var row = cell.getRow();

                checkbox.addEventListener('change', e => {
                  row.toggleSelect();
                });
                checkbox.checked = row.isSelected();
                this.table.modules.selectRow.registerRowSelectCheckbox(
                  row,
                  checkbox,
                );
              } else {
                checkbox.addEventListener('change', () => {
                  if (this.table.modules.selectRow.selectedRows.length) {
                    this.table.deselectRow();
                  } else {
                    this.table.selectRow();
                  }
                });

                this.table.modules.selectRow.registerHeaderSelectCheckbox(
                  checkbox,
                );
              }
            }
            return checkbox;
          }
        },
        titleFormatter: 'rowSelection',
        align: 'center',
        headerSort: false,
        width: '5px',
        cellClick: function(e, cell) {
          if (!cell.getRow().getTreeParent()) {
            return cell.getRow().toggleSelect();
          }
        },
      },

注意：document.createElement 会在 react 中导致性能问题，因为它与真实的 DOM 交互。如果你想访问 DOM，请查看Refs and the DOM

Answer 3

您可以使用Selection Elegibility Function 来确定是否可以选择行。

因此您可以使用 selectableCheck 回调并检查该行是否有父行以查看它是否应该是可选的

var table = new Tabulator("#example-table", {
    selectableCheck:function(row){
        //row - row component
        return !row.getTreeParent(); //only allow selection if the row has no parent
    },
});