在制表符4.4上,我尝试重新组合表。我有两个按钮。按钮A按column1分组,按钮B按column1和colum2分组。可以了 我还想将显示的组设置为打开。但这似乎不起作用。单击“所有组”的按钮A,应将其折叠,单击“列1”的组的按钮B,应将其展开,将第2列的按钮的组都折叠。
<body>
<div id="example-table"></div>
<div id="tabulator-controls">
Group by:
<button name="groupbya" id="groupbya" onclick="group1()">
Column A
</button>
<button name="groupbyb" id="groupbyb" onclick="group2()">
Column A+B
</button>
</div>
<script language="JavaScript">
var tabledata = [
{id:1, column1:"GroupA", column2:"GroupA1", column3:"1", column4:"1"},
{id:2, column1:"GroupA", column2:"GroupA1", column3:"2", column4:"2"},
{id:3, column1:"GroupA", column2:"GroupA2", column3:"3", column4:"3"},
{id:4, column1:"GroupA", column2:"GroupA2", column3:"4", column4:"4"},
{id:5, column1:"GroupB", column2:"GroupB1", column3:"1", column4:"1"},
{id:6, column1:"GroupB", column2:"GroupB1", column3:"2", column4:"2"},
{id:7, column1:"GroupB", column2:"GroupB2", column3:"3", column4:"3"},
{id:8, column1:"GroupB", column2:"GroupB2", column3:"4", column4:"4"},
];
var table = new Tabulator("#example-table", {
data:tabledata,
height:"500px",
placeholder:"No Data Set",
groupClosedShowCalcs:true,
columns:[
{title:"Column1", field:"column1"},
{title:"Column2", field:"column2"},
{title:"Column3", field:"column3", bottomCalc:"sum", bottomCalcParams:{precision:0}},
{title:"Column4", field:"column4", bottomCalc:"sum", bottomCalcParams:{precision:0}},
]
});
function group1(){
table.setGroupStartOpen(false);
table.setGroupBy("column1");
}
function group2(){
table.setGroupStartOpen([true,false]);
table.setGroupBy(["column1","column2"]);
}
</script>
</body>
1。第一次单击按钮A后可以加载页面,但是单击按钮B时,第1列的组不会展开。
2。当我第一次单击按钮B后加载该页面时,可以,但是单击按钮A时,第1列的组不会折叠。它们已展开。
答案 0 :(得分:0)
setGroupStartOpen 仅在将数据加载到表中时进行计数,而不是在更改groupBy之后进行计数。
在这种情况下,您有两种选择:
您可以将数据重新加载到表中,然后刷新组的折叠状态
或者在更改groupBy之后,您可以在表上调用 getGroups 函数以获取Group Componnents数组,然后对其进行迭代并调用<根据需要依次对每个组的strong> 显示 或 隐藏 功能