如何更改 Tabulator.js 中标题复选框的行为？

如何解决如何更改 Tabulator.js 中标题复选框的行为？

我希望单击顶部标题复选框后的逻辑有所不同。目前（我正在使用自定义格式化程序）它选择所有第一级行。

我希望单击选择/取消选择所有不是父行的行。或者至少不要选择父行。

在当前设置的父行 GIT_CONfig 中点击，然后被取消选择。

自定义格式化程序看起来像那样。老实说，我不明白代码。我试图将 console.log 放在下面定义中的每个 tree toggle 中，但它没有被触发。

我想答案可能在 addEventListener 中，但我不知道如何使用它。

努力jsFiddle尝试。

registerHeaderSelectCheckBox

解决方法

titleFormatter 选项用于标题行复选框，formatter 选项用于行复选框

var do_not_show_checkbox_ids = [1];

function customFormatter(isHeader = false) {
    return function(cell,formatterParams,onRendered) {
          var checkbox = null;

          // check if selectable is true in options
          if (this.table.modExists("selectRow",true)) {
            checkbox = document.createElement("input");
            checkbox.type = 'checkbox';
            // add click event in checkbox
            checkbox.addEventListener("click",(e) => {
              console.log('header',isHeader);
              e.stopPropagation();
            });

            // check if cell has getRow function if yes then it may be row
            if (typeof cell.getRow == 'function') {

              // get cell row
              var row = cell.getRow();

              // get cell data for condition testing
              const data = cell.getData();

              // if is row and not skippable id
              if (row._getSelf().type == "row" && do_not_show_checkbox_ids.indexOf(data['id']) == -1) {

                // add change event to toggle cell row
                checkbox.addEventListener("change",(e) => {
                  row.toggleSelect();
                });

                // update checkbox after row toggle
                checkbox.checked = row.isSelected && row.isSelected();

                // registering for if row clicked from anywhere then checkbox check/uncheck
                this.table.modules.selectRow.registerRowSelectCheckbox(row,checkbox);
              } else {
                // if is row and skippable id
                checkbox = "";
              }
            } else {
               // header checkbox then add change addEventListener for selecting/deselecting all rows. 
              checkbox.addEventListener("change",(e) => {
                // get all rows
                this.table.getRows().forEach(row => {
                  // get row nodes/children
                  row.getTreeChildren().forEach(child => {
                    // check if child selected if yes then deselect else select
                    child.isSelected() ? child.deselect() : child.select();
                  })
                });

                // for selecting/deselecting all rows
                // if (this.table.modules.selectRow.selectedRows.length) {
                //  console.log('header',isHeader);
                //  this.table.deselectRow();
                // } else {
                //  this.table.selectRow(formatterParams.rowRange);
                // }
              });

              // updating internal header checkbox
              this.table.modules.selectRow.registerHeaderSelectCheckbox(checkbox);
            }

            return checkbox;
          }
          return null;
  };
}

var tableDataNested = [{
    id: 1,name: "BalanceOil",_children: [{
        id: 11,name: "BalanceOil+",cena: 31,mn: 1,cena_1: 159
      },{
        id: 12,name: "BalanceOil Aqua",cena: 41,]
  },{
    id: 2,name: "Xtend",cena: 23,mn: 1
  },{
    id: 3,name: "Zinobiotic",cena: 24,mn: 1
  }
];

var table = new Tabulator("#example-table",{
  movableColumns: true,data: tableDataNested,dataTree: true,selectable: true,columns: [{
      title: "Name",field: "name",headerSort: false,width: 200
    },{
      title: "Cena",field: "cena",headerSort: false
    },{
      titleFormatter: customFormatter(true),formatter: customFormatter(),hozAlign: "center",cellClick: function(e,cell) {
        console.log('header',e,cell)
        this.recalc();
      }
    },{
      title: "mn",field: "mn",editor: "number",cellEdited: function(cell) {
        updateSum(cell);
      }
    },{
      title: "Sum",field: "sum",headerSort: false
    }
  ],rowClick: function(e,row) {
    // console.log(table.getRows().length);
  },rowSelectionChanged: function(data,rows) {
    // console.log(data,rows);
    // console.log(this.getData());
  },renderComplete: function(t) {
    this.getRows().forEach(function(value,index) {
      // console.log(value.isSelected());
      var children = value.getTreeChildren();
      for (let j = 0; j < children.length; j++) {
        const name = children[j].getData().name;
      }
      children.forEach(function(value,index) {
        // console.log("cena");
        var cena = value.getData().cena; //price

        // console.log(cena);
        var mnozstvi = value.getData().mn; //amount
        value.update({
          sum: cena * mnozstvi
        });
      });
      updateSum(value.getCell("mn"));
    });
  },row) {
    if (row.getTreeChildren().length > 0) {
      table.deselectRow(row.getData().id);
      row.treeToggle();
    }
  },});

function updateSum(cell) {
  var cena = cell.getData().cena; //price
  var mnozstvi = cell.getValue(); //amount
  if (mnozstvi) {
    cell.getRow().update({
      sum: cena * mnozstvi
    });
  }
}

在这里工作example

tabulator 文档链接 - rowSelection 和 dataTree

注意：有关 tabulator 行选择如何在内部工作的信息，请查看 here