如何在 Tabulator.js 中使用格式化程序：“rowSelection”时删除、隐藏一个复选框？

Question

我在用

  {formatter:"rowSelection", titleFormatter:"rowSelection", hozAlign:"center", headerSort:false, cellClick:function(e, cell){
           table.recalc();
  }},

但我不希望显示标记的复选框（见图）。 您可以使用jsFiddle进行尝试。

这可能使用制表功能吗？ 如果不是，那么我想我可以在renderComplete function 中将其从 DOM 中删除。

UPDATE1实际上我不想要“父”级别的所有复选框。

Answer 1

您可以为其创建自定义formatter

在这里，我创建了自定义DOM元素，并且仅在满足某些条件时从格式化程序 function 返回，否则返回null导致它呈现空单元格。

Tabulator器使用selectRow模块进行选择

在自定义格式化程序中，我检查了用户是否启用了selectable选项，如果是，那么它将启用selectRow模块，然后测试它的行或表是否是一行，然后复选框将选择/取消选择我在tabulator中注册的行，让它知道使用这个复选框组件，如果它不是一行，那么它将是我将复选框注册到 header 选择的表格，它选择/取消选择整个表格。

var do_not_show_checkbox_ids = [1];

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,
        mn: 1,
        cena_1: 159
      },
    ]
  },
  {
    id: 2,
    name: "Xtend",
    cena: 23,
    mn: 1
  },
  {
    id: 2,
    name: "Xtend",
    cena: 23,
    mn: 1
  },
  {
    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
    },
    {
      formatter: function(cell, formatterParams, onRendered) {
        const data = cell.getRow().getData();
        if (do_not_show_checkbox_ids.indexOf(data['id']) == -1) {
          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();
              if (row._getSelf().type == "row") {

                checkbox.addEventListener("change", (e) => {
                  row.toggleSelect();
                });

                checkbox.checked = row.isSelected && row.isSelected();
                this.table.modules.selectRow.registerRowSelectCheckbox(row, checkbox);
              } else {
                checkbox = "";
              }
            } else {
              checkbox.addEventListener("change", (e) => {
                if (this.table.modules.selectRow.selectedRows.length) {
                  this.table.deselectRow();
                } else {
                  this.table.selectRow(formatterParams.rowRange);
                }
              });
              this.table.modules.selectRow.registerHeaderSelectCheckbox(checkbox);
            }
          }
          return checkbox;
        }
        return null;
      },
      titleFormatter: "rowSelection",
      hozAlign: "center",
      headerSort: false,
      cellClick: function(e, cell) {
        this.recalc();
      }
    },
    {
      title: "mn",
      field: "mn",
      editor: "number",
      headerSort: false,
      cellEdited: function(cell) {
        updateSum(cell);
      }
    },
    {
      title: "Sum",
      field: "sum",
      headerSort: false
    }
  ],
  rowClick: function(e, row) {
    // console.log(table.getRows().length);
  },
  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"));
    });
  },
  selectableCheck: function(row) {
    //row - row component
    return row.getData().cena > 0; //allow selection of rows where the age is greater than 18
  },
});

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

这里的工作示例

制表符文档链接 -自定义格式化程序

注意：有关tabulator格式化程序如何在内部工作的信息，请查看此处