我想知道你是否可以帮忙解决一些我认为非常简单的事情。使用制表符嵌套表示例(不是树),如何使子表在单击时显示/隐藏?我希望用户能够在需要类似于树示例的情况下扩展以获取更多信息。
我看过一些答案,但它们似乎对我不起作用。
//define table
var table = new Tabulator("#example-table", {
height:"311px",
layout:"fitColumns",
resizableColumns:false,
data:nestedData,
columns:[
{title:"Make", field:"make"},
{title:"Model", field:"model"},
{title:"Registration", field:"reg"},
{title:"Color", field:"color"},
],
rowFormatter:function(row){
//create and style holder elements
var holderEl = document.createElement("div");
var tableEl = document.createElement("div");
holderEl.style.boxSizing = "border-box";
holderEl.style.padding = "10px 30px 10px 10px";
holderEl.style.borderTop = "1px solid #333";
holderEl.style.borderBotom = "1px solid #333";
holderEl.style.background = "#ddd";
tableEl.style.border = "1px solid #333";
holderEl.appendChild(tableEl);
row.getElement().appendChild(holderEl);
var subTable = new Tabulator(tableEl, {
layout:"fitColumns",
data:row.getData().serviceHistory,
columns:[
{title:"Date", field:"date", sorter:"date"},
{title:"Engineer", field:"engineer"},
{title:"Action", field:"actions"},
]
})
},
});
这里混合使用@dota2pro示例是一个很好的解决方案:
https://jsfiddle.net/ustvnz5a/2/
var nestedData = [{
id: 1,
make: "Ford",
model: "focus",
reg: "P232 NJP",
color: "white",
serviceHistory: [{
date: "01/02/2016",
engineer: "Steve Boberson",
actions: "Changed oli filter"
},
{
date: "07/02/2017",
engineer: "Martin Stevenson",
actions: "Break light broken"
},
]
},
{
id: 2,
make: "BMW",
model: "m3",
reg: "W342 SEF",
color: "red",
serviceHistory: [{
date: "22/05/2017",
engineer: "Jimmy Brown",
actions: "Aligned wheels"
},
{
date: "11/02/2018",
engineer: "Lotty Ferberson",
actions: "Changed Oil"
},
{
date: "04/04/2018",
engineer: "Franco Martinez",
actions: "Fixed Tracking"
},
]
},
]
var hideIcon = function(cell, formatterParams, onRendered){ //plain text value
return "<i class='fa fa-eye-slash'></i>";
};
const table = new Tabulator("#example-table", {
height: "311px",
layout: "fitColumns",
resizableColumns: false,
data: nestedData,
selectable: true,
columns: [{
title: "Make",
field: "make"
},
{
title: "Model",
field: "model"
},
{
title: "Registration",
field: "reg"
},
{
title: "Color",
field: "color"
},
{formatter:hideIcon, align:"center", title:"Hide Sub", headerSort:false, cellClick:function(e, row, formatterParams){
const id = row.getData().id;
$(".subTable" + id + "").toggle();
}
}
],
rowFormatter: function(row, e) {
//create and style holder elements
var holderEl = document.createElement("div");
var tableEl = document.createElement("div");
const id = row.getData().id;
holderEl.style.boxSizing = "border-box";
holderEl.style.padding = "10px 10px 10px 10px";
holderEl.style.borderTop = "1px solid #333";
holderEl.style.borderBotom = "1px solid #333";
holderEl.style.background = "#ddd";
holderEl.setAttribute('class', "subTable" + id + "");
tableEl.style.border = "1px solid #333";
tableEl.setAttribute('class', "subTable" + id + "");
holderEl.appendChild(tableEl);
row.getElement().appendChild(holderEl);
var subTable = new Tabulator(tableEl, {
layout: "fitColumns",
data: row.getData().serviceHistory,
columns: [{
title: "Date",
field: "date",
sorter: "date"
},
{
title: "Engineer",
field: "engineer"
},
{
title: "Action",
field: "actions"
},
]
})
},
});
检查这个jsfiddle
selectable: true,
rowClick: function(e, row) {
const id = row.getData().id;
$(".subTable" + id + "").toggle();
},
这只是为了帮助默认隐藏展开的部分。我的解决方案有两部分。一种是当我加载数据时,一种是当使用分页控件更改页面时。
这是我设置数据时的部分:
myTable.setData(myData);
myTable.setHeight("100%");
myTable.redraw();
var rows = myTable.getRows();
rows.forEach(function (row) {
var data2 = row.getData();
const id = data2.IDField;
$(".subTable" + id + "").toggle();
});
我使用此事件来处理页面更改:
pageLoaded: function (pageno) {
var rows = myTable.getRows();
rows.forEach(function (row) {
var data = row.getData();
const id = data.AssetNumber;
//use hide, toggle works great first time you view the tab, 2nd time it opens them all
$(".subTable" + id + "").hide();
//$(".subTable" + id + "").toggle();
});
}
感谢其他人使用的优秀代码。