将复选框添加到制表器表格单元格

时间：2019-10-04 15:08:54

标签： tabulator

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

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

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

table

这是我的代码：

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'>");
<script src="https://unpkg.com/tabulator-tables@4.4.3/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.4.3/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="example-table"></div>

2 个答案:

答案 0 :(得分：0)

我认为您应该让制表符绘制该复选框。有一个API可用于在表格单元格内进行白费。 Tanbbulator formatters。 初始化制表器时必须设置此项。 格式化程序配置只不过是一个自己的函数，该函数编写代码以显示内部单元格。

优良文档中的制表符示例代码的无耻使用...：

//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)}},

///查看下一行格式化程序：function（cell，formatterParams）{您的    密码} 

{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"}
],
});

答案 1 :(得分：0)

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

请看下面的可运行示例，在该示例中，我向您的复选框列添加了格式化程序功能，该函数将呈现一个带有该列值（如果存在）的复选框。您可以修改格式化程序以呈现所需的任何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>

相关问题
最新问题