我正在使用制表器在我的网站上创建表格。我可以通过单击行来选择行，也可以使用 tabulator.selectRow() 方法选择所有行。
根据文档：
要选择特定行，您可以传递任何标准行 组件在函数的第一个参数中查找选项。
我已经见过几次了，但没有有效的例子。有谁知道需要如何提供行组件查找选项？
假设我有一些带有名称字段的行。
我想选择 name == 'dennis' 的行。
文档建议我可以在 selectRow() 参数中传递查找选项。只是没有示例或任何指示来说明参数的预期语法。
我目前的工作方式是这样的，这似乎不是最直观的方式。
table.getRows().forEach(row => {
if (row.getData().name == 'dennis') row.toggleSelect();
});
或者像这样：
params.layer.tableView.table.getRows()
.filter(row => row.getData().name == 'dennis')
.forEach(row => row.toggleSelect());
我最终在 github 的帮助下到达了那里。 #1749
为我解决这个问题的一点是：
任何将组件作为参数的函数也会尝试 根据提供的值查找该组件（如果它不是） 组件本身。
这里作为选择我的行的示例。
table.selectRow(table.getRows().filter(row => row.getData().name == 'Dennis'));
谢谢你的帖子丹尼斯。
这是 Tabulator 6.2 的工作示例。
更新嵌套表中的单元格后，代码会更新同一嵌套行以及父行中的其他值。
我添加了很多注释来解释功能。
要进行测试，请在浏览器中运行以下代码并更改嵌套行中的任何 Qty 值：
<html>
<head>
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
</head>
<body>
<div id="example-table"></div>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<script>
//define some sample data, with the sub-table data held in the subtable parameter
var tableData = [
{
invoiceId: 1, customer: "Bob", invoiceTotal: "",
invoiceRows: [
{ itemName: "Bread", qty: 3, price: 2, itemTotal: "", invoiceId: 1 }
],
},
{
invoiceId: 2, customer: "Ann", invoiceTotal: "",
invoiceRows: [
{ itemName: "Tyres", qty: 4, price: 100, itemTotal: "", invoiceId: 2 },
{ itemName: "Gas", qty: 1, price: 30, itemTotal: "", invoiceId: 2 }
],
},
{
invoiceId: 3, customer: "Jim", invoiceTotal: "",
invoiceRows: [
{ itemName: "Wine", qty: 2, price: 4, itemTotal: "", invoiceId: 3 },
{ itemName: "Cheese", qty: 7, price: 3, itemTotal: "", invoiceId: 3 }
],
},
];
let table = new Tabulator("#example-table", {
height:400,
data:tableData,
layout:"fitDataFill",
columns:[
{ title: "Invoice Id", field:"invoiceId"},
{ title: "Customer", field: "customer" },
{ title: "Invoice Total", field: "invoiceTotal",
formatter: function (cell, formatterParams, onRendered) {
// Sum the values of the nested rows
let rowData = cell.getRow().getData();
let invoiceRows = rowData['invoiceRows'];
let varInvoiceCost = 0;
let itemCount = Object.keys(invoiceRows).length
for (let i = 0; i < itemCount; i++) {
let itemObj = invoiceRows[i];
let varQty = 0;
let varPrice = 0;
Object.entries(itemObj).forEach(([key, value]) => {
if (key == 'qty') {
varQty = value;
}
if (key == 'price') {
varPrice = value;
}
});
varInvoiceCost += (varQty * varPrice);
}
return varInvoiceCost;
},
},
],
rowFormatter: function (row) {
//create and style holder elements
var holderEl = document.createElement("div");
var tableEl = document.createElement("div");
// Remove nested table - if exists.
// Without this, the parent row will duplicate the
// nested table, each time you update the parent row.
holderEl.classList.add("nested-table")
var el = row.getElement();
var nested = el.getElementsByClassName("nested-table");
for (let child of nested) {
child.parentNode.removeChild(child);
}
holderEl.style.boxSizing = "border-box";
holderEl.style.padding = "10px 30px 10px 10px";
holderEl.style.borderTop = "1px solid #333";
holderEl.style.borderBotom = "1px solid #333";
tableEl.style.border = "1px solid #333";
holderEl.appendChild(tableEl);
row.getElement().appendChild(holderEl);
var subTable = new Tabulator(tableEl, {
layout: "fitColumns",
data: row.getData().invoiceRows,
columns: [
{ title: "Invoice Id", field: "invoiceId", }, // hide with visible:false,
{ title: "Item Name", field: "itemName" },
{ title: "Qty", field: "qty",
// Editor is used to edit the Qty value
editor: function (cell, onRendered, success, cancel, editorParams) {
let cellValue = cell.getValue();
let input = document.createElement("input");
input.setAttribute("type", "text");
input.value = typeof cellValue !== "undefined" ? cellValue : "";
onRendered(function () {
input.focus();
});
//when the value has been set, trigger the cell to update
function successFunc() {
// Update backend via Ajax if needed
// Call success(input.value) from Ajax.done()
success(input.value); // Update the screen
}
input.addEventListener("change", successFunc);
input.addEventListener("blur", successFunc);
return input;
},
// cellEdited is triggered after a Qty value was changed
cellEdited: function (cell) {
// Update the value of itemTotal in the nested row, which will
// trigger its formatter to recalculate and display
// its new value (based on the new Qty in the nested row).
let row = cell.getRow();
let varQty = row.getCell('qty').getValue();
let varPrice = row.getCell('price').getValue();
let varItemTotal = varQty * varPrice;
row.update({ "itemTotal": varItemTotal })
// Update the value of invoiceTotal in the parent row.
// Retrieve the parent row based on invoiceId in the nested row.
// Change the value of invoiceTotal in the parent row's DOM, which
// will trigger the invoiceTotal formatter to recalculate and display
// its new value (based on the new values in the nested rows).
// ***Note***
// Since the formatter will calculate the value to display,
// based on the values of the nested rows (not invoiceTotal),
// you could technically store any value in invoiceTotal,
// as long as its a different value than before (to trigger the
// formatter). To illustrate this, the following statements update
// the value of invoiceTotal with the current timestamp, but the
// formatter will still display the correct output (we could have
// done the same with itemTotal above).
// However, if you later retrieve the value of invoiceTotal, you
// will get the timestamp stored in the DOM, and not the value which
// the formatter returned (displayed on the screen).
// Ps. This is just to explain why console.log() sometimes outputs
// different values from what are displayed on your screen.
let varInvoiceId = row.getCell('invoiceId').getValue();
let parentRow = table.getRows().find(row => {
return row.getCell('invoiceId').getValue() == varInvoiceId;
});
parentRow.update({ "invoiceTotal": Date.now() }); // use timestamp
},
},
{ title: "Price", field: "price" },
{
title: "Item Total", field: "itemTotal",
formatter: function (cell, formatterParams, onRendered) {
let varQty = cell.getRow().getCell('qty').getValue();
let varPrice = cell.getRow().getCell('price').getValue();
return varQty * varPrice;
},
},
]
})
},
});
</script>
</body>
</html>