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

本文介绍了使用格式化程序时如何删除、隐藏一个复选框:“rowSelection"在 Tabulator.js 中?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用

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

但我不希望显示标记的复选框(见图片).您可以使用

更新1实际上我不想要父"上的所有复选框水平.

解决方案

您可以为其创建自定义formatter

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

Tabulator 使用 selectRow 模块进行选择

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

var do_not_show_checkbox_ids = [1];var tableDataNested = [{编号:1，名称:平衡油"，_孩子们: [{编号:11，名称:BalanceOil+"，塞纳:31，男:1，cena_1:159},{编号:12，名称:BalanceOil Aqua"，塞纳:41，男:1，cena_1:159},]},{编号:2，名称:Xtend"，塞纳:23，男:1},{编号:2，名称:Xtend"，塞纳:23，男:1},{编号:2，名称:Xtend"，塞纳:23，男:1},{编号:3，名称:Zinobiotic"，塞纳:24，男:1}];var table = new Tabulator(#example-table", {可移动列:真，数据:tableDataNested，数据树:真，可选:真，列: [{标题:姓名"，字段:名称"，标题排序:假，宽度:200},{title: "塞纳",字段:cena"，标题排序:假},{格式化程序:函数(单元格，formatterParams，onRendered){const data = cell.getRow().getData();如果 (do_not_show_checkbox_ids.indexOf(data['id']) == -1) {var checkbox = document.createElement(输入");checkbox.type = 'checkbox';如果(this.table.modExists(selectRow"，真)){checkbox.addEventListener(click", (e) => {e.stopPropagation();});if (typeof cell.getRow == 'function') {var row = cell.getRow();if (row._getSelf().type == "row") {checkbox.addEventListener(更改", (e) => {row.toggleSelect();});checkbox.checked = row.isSelected &&row.isSelected();this.table.modules.selectRow.registerRowSelectCheckbox(row, checkbox);} 别的 {复选框="；}} 别的 {checkbox.addEventListener(更改", (e) => {如果(this.table.modules.selectRow.selectedRows.length){this.table.deselectRow();} 别的 {this.table.selectRow(formatterParams.rowRange);}});this.table.modules.selectRow.registerHeaderSelectCheckbox(checkbox);}}返回复选框；}返回空；},titleFormatter: "rowSelection",hozAlign:中心"，标题排序:假，单元格点击:函数(e，单元格){this.recalc();}},{title: "mn",字段:mn"，数字"，标题排序:假，单元格功能(单元格){更新总和(单元格)；}},{title: "总和",字段:总和"，标题排序:假}],行点击:函数(e，行){//console.log(table.getRows().length);},渲染完成:函数(t){this.getRows().forEach(function(value, index) {console.log(value.isSelected());var children = value.getTreeChildren();for (让 j = 0; j

在这里工作示例

tabulator 文档链接 - 自定义格式化程序

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

I am using

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

but I do not want the marked checkbox (see the picture) to be displayed. You can use jsFiddle to try out.

Is that possible using Tabulator functionality? If not then I am thinking that I can remove it from DOM in renderComplete function.

UPDATE1actually I do not want all checkboxes that are on the "parent" level.

解决方案

You can create custom formatter for it

Here i have created custom DOM element and only returned from formatter function if some conditions are met otherwise returned null which cause it to render empty cell.

Tabulator use selectRow module for selection

In custom formatter i checked if user has enabled selectable option if yes then it will enable selectRow module, then tested if its row or table if its a row then checkbox will select/deselect row which i registerd in tabulator to let it know that use this checkbox component, if it is not a row then it would be table for that i registered checkbox to header selection which selects/deselects entire table.

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

Here working example

tabulator documentation links - custom formatter

Note: For info about how tabulator formatters works internally check here

                        这篇关于使用格式化程序时如何删除、隐藏一个复选框:“rowSelection"在 Tabulator.js 中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！