按 RowClick 展开列

Question

我已经在制表器中使用responsiveLayout:"collapse" 和responsiveLayoutCollapseStartOpen:false 设置了我的表格。

我的表格可以正确显示折叠列。 我将formatter:"responsiveCollapse" 添加为列，我正确地获得了带有 + 和 - 图标的列，并且可以手动展开/折叠列。

但为了在智能手机上使用，图标渲染得确实有点小。 我想根据回调rowClick添加展开/折叠。

我在 tabulator.js 中找到了 responsiveCollapse 和 toggleList，所以我想我知道需要发生什么。但是我完全在努力如何从rowClick 中返回它。

非常感谢您提前提示。

在制表符构造函数中我有：

columns:[ 
    { formatter:"responsiveCollapse", width:30, minWidth:30,      
    hozAlign:"center", resizable:false, headerSort:false, responsive:0 },           
    { title:"Ren.", field:"Race_Number", sorter:"number", 
    hozAlign:"center", minWidth:60, widthGrow:1, responsive:0 },
]

基本上我想实现一些功能作为格式化程序：rowClick中的“responsiveCollapse”：

rowClick:function(e, id, data, row){ 
    //trigger an alert message when the row is clicked
    //what to do here to achieve same as formatter:"responsiveCollapse"
},

Answer 1

您可以从内置的 responsiveCollapse 格式化程序中复制一些代码来实现此目的。它将涉及访问一些私有变量，这有点调皮，但它会完成这项工作：

rowClick:function(e, id, data, row){ 
    var config = cell.getRow()._row.modules.responsiveLayout; //get the responsive config object for the row
    var collapseEl = config.element; //get the collapsible element for the row

    if(collapseEl){ //check if the row has any collapsed data

        config.open = !config.open; toggle the open state

        //toggle the collapse element
        if(config.open){
            el.classList.add("open");
            collapseEl.style.display = '';
        }else{
            el.classList.remove("open");
            collapseEl.style.display = 'none';
        }
    }
}

Answer 2

这很有帮助，记得注释掉“切换打开状态”并更新 el.classList.remove("打开"); 到 collapseEl.classList.remove("open");