将复选框添加到 Tabulator 表格单元格

Question

我试图让第 2 列第 1 行中的单元格使用 jQuery 有一个复选框。 我从Tabulator得到这个表，所以它不是一个简单的 HTML 表。 我已经尝试了几件事。 我知道单元格是tableDataNested[0].checkbox ，因为当我执行console.log(tableDataNested[0].checkbox)时，它会在控制台中显示“测试”。 但是我需要在其中放置一个复选框，所以我尝试了以下操作：

$(tableDataNested[0].checkbox).html("<input type='checkbox'>");

但这仍然行不通。 这是表格的屏幕截图。

这是我的代码：

var tableDataNested = [
    {blank:'Cash/bank account', checkbox:"Test", date1:"79,273,859.58-", date2:"208,708,562.37-", date3:"214,901,976.97-", date4:"2,358,176,883.70", _children:[
        {blank:"1000-AdvanSix Inc.", date1:"79,273,859.58-", date2:"208,708,562.37-", date3:"214,901,976.97-", date4:"2,358,176,883.70", _children:[
            {blank:"Mellon Bank"},
            {blank:"First Chicago National Lockbox"},
            {blank:"Chase Manhattan Bank"},
            {blank:"Lockbox Mellon Bank"},
            {blank:"JP Morgan Chase Disbursement", date1:"79,273,859.58-", date2:"208,708,562.37-", date3:"214,901,976.97-", date4:"2,358,176,883.70"}
        ]},
    ]},
    {blank:"Add :Cash Inflow", date1:"129,008.54", date2:"535,400.00", date3:"2,574,013,670.32", date4:"", _children:[
        {blank:"Open AR - Estimated", date1:"129,008.54", date2:"535,400.00", date3:"2,574,013,670.32", date4:"", _children:[
            {blank:"1000-AdvanSix Inc.", date1:"79,273,859.58-", date2:"208,708,562.37-", date3:"214,901,976.97-", date4:"2,358,176,883.70"}
        ]},
        {blank:"Open Intercompany Receivable", },
        {blank:"Incoming Operating Cash",  _children:[
            {blank:"SETTLEMENT BUILDING", _children:[
                {blank:"1000-AdvanSix Inc.", _children: [
                    {blank:"Test"}
                ]},
            ]},
            {blank: "OTHER INCOMING PATIENTS"}
        ]},
        {blank: "- Incoming finance cash", _children:[]}
    ]},
];

console.log(tableDataNested[0].checkbox);

var table = new Tabulator("#example-table", {
    height:"100%",
    data:tableDataNested,
    dataTree:true,
    // dataTreeStartExpanded:true,
    columns:[
        {title:"", field:"blank",  width:'21%'}, //never hide this column
        {title:"Generate<br>Graph?", field: "checkbox", align:"center", width:'16%' },
        {title:"06/07/2019-07/07/2019", field:"date1", align:"center", width:'16%'},
        {title:"07/08/2019-08/08/2019", field:"date2", align:"center", width:'16%'}, //hide this column first
        {title:"08/09/2019-09/09/2019", field:"date3", align:"center", width:'16%'},
        {title:"09/10/2019-10/10/2019", field:"date4", align:"center", sorter:"date", width:'16%'},
    ],
});

$(tableDataNested[0].checkbox).html("<input type='checkbox'>");

Answer 1

我认为您应该让制表符绘制复选框。 有一个 API 可用于在表格单元格内执行 whaetver。 Tanbbulator 格式化程序。 这必须在初始化制表符时设置。 格式化程序配置只不过是一个自己的 function ，它编写代码来显示里面的单元格。

无耻地使用来自精美文档的制表符示例代码......：

//Build Tabulator
var table = new Tabulator("#example-table", {
height:"311px",
layout:"fitColumns",
rowFormatter:function(row){
    if(row.getData().col == "blue"){
        row.getElement().style.backgroundColor = "#A6A6DF";
    }
},
columns:[
{formatter:"rownum", align:"center", width:40},
{formatter:printIcon, width:40, align:"center", cellClick:function(e, cell) 
{alert("Printing row data for: " + cell.getRow().getData().name)}},

//看下一行 formatter:function(cell, formatterParams){YOUR CODE}

{title:"Name", field:"name", width:150, formatter:function(cell, 
  formatterParams){
  // here you are free to insert a checkbox input  tag and a label if needed
  var value = cell.getValue();


    if(value.indexOf("o") > 0){
       // return "<span style='color:red; font-weight:bold;'>" + value + 
       //"</span>";
       if (your_condition_is_checked){
         return "<input type='checkbox' name="your_name" checked>"
       } else {
              return "<input type='checkbox' name="your_name">" 
       }

    }else{
        return value;
    }


}},
{title:"Progress", field:"progress", formatter:"progress", formatterParams:{color: 
["#00dd00", "orange", "rgb(255,0,0)"]}, sorter:"number", width:100},
{title:"Rating", field:"rating", formatter:"star", formatterParams:{stars:6}, 
align:"center", width:120},
{title:"Driver", field:"car", align:"center", formatter:"tickCross", width:50},
{title:"Col", field:"col" ,formatter:"color", width:50},
{title:"Line Wraping", field:"lorem" ,formatter:"textarea"},
{formatter:"buttonCross", width:30, align:"center"}
],
});

Answer 2

您正试图以一种骇人听闻的方式将复选框添加到表格中。 最好使用Tabulator API ，它提供了一种为列和行创建模板（他们称之为格式化程序）的清晰方法。 您可以使用列格式化程序根据值和其他属性有条件地格式化您的单元格。

请看下面的可运行示例，其中我将格式化程序 function 添加到您的复选框列，如果存在，它将呈现一个带有列中值的 lebel 的复选框。 您可以修改格式化程序以呈现您想要的任何 HTML。

 var tableDataNested = [{ blank: 'Cash/bank account', checkbox: 'Test', date1: '79,273,859.58-', date2: '208,708,562.37-', date3: '214,901,976.97-', date4: '2,358,176,883.70', _children: [{ blank: '1000-AdvanSix Inc.', date1: '79,273,859.58-', date2: '208,708,562.37-', date3: '214,901,976.97-', date4: '2,358,176,883.70', _children: [{ blank: 'Mellon Bank' }, { blank: 'First Chicago National Lockbox' }, { blank: 'Chase Manhattan Bank' }, { blank: 'Lockbox Mellon Bank' }, { blank: 'JP Morgan Chase Disbursement', date1: '79,273,859.58-', date2: '208,708,562.37-', date3: '214,901,976.97-', date4: '2,358,176,883.70' }] }] }, { blank: 'Add:Cash Inflow', date1: '129,008.54', date2: '535,400.00', date3: '2,574,013,670.32', date4: '', _children: [{ blank: 'Open AR - Estimated', date1: '129,008.54', date2: '535,400.00', date3: '2,574,013,670.32', date4: '', _children: [{ blank: '1000-AdvanSix Inc.', date1: '79,273,859.58-', date2: '208,708,562.37-', date3: '214,901,976.97-', date4: '2,358,176,883.70' }] }, { blank: 'Open Intercompany Receivable' }, { blank: 'Incoming Operating Cash', _children: [{ blank: 'SETTLEMENT BUILDING', _children: [{ blank: '1000-AdvanSix Inc.', _children: [{ blank: 'Test' }] }] }, { blank: 'OTHER INCOMING PATIENTS' }] }, { blank: '- Incoming finance cash', _children: [] }] }]; var table = new Tabulator('#example-table', { height: '100%', data: tableDataNested, dataTree: true, columns: [{ title: '', field: 'blank', width: '21%' }, { title: 'Generate<br>Graph?', field: 'checkbox', align: 'center', formatter: (cell) => { const value = cell.getValue(); if (value) { return ` <input type="checkbox" /> <label>${value}</label> `; } }, width: '16%' }, { title: '06/07/2019-07/07/2019', field: 'date1', align: 'center', width: '16%' }, { title: '07/08/2019-08/08/2019', field: 'date2', align: 'center', width: '16%' }, { title: '08/09/2019-09/09/2019', field: 'date3', align: 'center', width: '16%' }, { title: '09/10/2019-10/10/2019', field: 'date4', align: 'center', sorter: 'date', width: '16%' }, ], });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.4.3/js/tabulator.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.4.3/css/bootstrap/tabulator_bootstrap.min.css" rel="stylesheet"/> <div id="example-table"></div>