使_children在数据树中不可选-制表商React

2024-04-29 • 问答

我需要父行是可选的，并禁用对子行的选择。我正在使用带有复选框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",{ title: "Favourite Color",field: "col",{
        title: "Date Of Birth",field: "dob",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",col: "orange",dob: "01/08/1980",_children: [
              {
                name: "Margret Marmajuke",location: "Canada",col: "yellow",dob: "31/01/1999"
              },]
          }
        ]
      },{
        name: "James Newman",location: "Japan",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;

由于时间限制，我没有探索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()

自定义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会因为与真实DOM交互而导致性能问题。如果要访问DOM，请签出Refs and the DOM

您可以使用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
    },});

使_children在数据树中不可选-制表商React

songlihai 回答：使_children在数据树中不可选-制表商React

大家都在问