将复选框添加到 Tabulator table 单元格
Add checkbox to Tabulator table cell
我正在尝试使用 jQuery 使第 2 列第 1 行中的单元格具有一个复选框。我从 Tabulator 得到这个 table，所以它不是一个简单的 HTML table。我已经尝试了几件事。我知道单元格是 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>
我认为你应该让制表符绘制复选框。有一个 API 可用于在 table 单元格内执行任何操作。 Tanbbulator formatters。
这必须在您初始化制表符时设置。
格式化程序配置只是一个自己的函数，它编写代码以显示内部单元格。
无耻地使用精美文档中的制表符示例代码...:[=13=]
//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
代码}
{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"}
],
});
您正试图以一种怪异的方式将复选框添加到 table。最好使用 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>
我正在尝试使用 jQuery 使第 2 列第 1 行中的单元格具有一个复选框。我从 Tabulator 得到这个 table，所以它不是一个简单的 HTML table。我已经尝试了几件事。我知道单元格是 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>
我认为你应该让制表符绘制复选框。有一个 API 可用于在 table 单元格内执行任何操作。 Tanbbulator formatters。 这必须在您初始化制表符时设置。 格式化程序配置只是一个自己的函数，它编写代码以显示内部单元格。
无耻地使用精美文档中的制表符示例代码...:[=13=]
//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 代码}
{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"}
],
});
您正试图以一种怪异的方式将复选框添加到 table。最好使用 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>