【发布时间】：2019-10-04 15:08:54
【问题描述】：
我正在尝试使用 jQuery 让第 2 列第 1 行中的单元格有一个复选框。我从 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'>");<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>【问题讨论】：
-
所以，看起来有一些“列”，然后 JS 循环遍历这些列并生成一个表。是否有任何被吐出的 DOM/HTML - 您可以在控制台中看到？看到那个代码会很有趣。似乎
tableDataNested[0].checkbox是“数据”而不是 DOM/HTML。因此，您不能向 JS 对象添加更多 DOM 是有道理的。您需要获取实际元素 - 以便您可以附加到它们。 -
我真的可以建议阅读原始文档。没有魔法。这是一个复杂而强大的控件，你迫不及待地想在 10 秒内理解它。
标签： tabulator