创建表时重新组合和setGroupStartOpen

时间:2019-09-10 11:20:57

标签: tabulator

在制表符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列的组不会折叠。它们已展开。

1 个答案:

答案 0 :(得分:0)

setGroupStartOpen 仅在将数据加载到表中时进行计数,而不是在更改groupBy之后进行计数。

在这种情况下,您有两种选择:

您可以将数据重新加载到表中,然后刷新组的折叠状态

或者在更改groupBy之后,您可以在表上调用 getGroups 函数以获取Group Componnents数组,然后对其进行迭代并调用<根据需要依次对每个组的strong> 显示 隐藏 功能