使 _children 在數據樹中不可選擇 - Tabulator React

Question

我需要父行可選擇並禁用子行的選擇。 我正在使用帶有復選框formatter選項的可選行來進行行選擇。 我嘗試使用selectableCheck但它不適用於刻度formatter 。

任何幫助將不勝感激。 請找到類似的代碼框鏈接：我想禁用子元素的行選擇復選框。

密碼箱鏈接

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

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
    },
});