將復選框添加到 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>