通过RowClick取消折叠列

问题描述

我已经在responsiveLayout:"collapse"和responsiveLayoutCollapseStartOpen:false的Tabulator中设置了表格。

我的表显示正确，但列已折叠。我将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",minWidth:60,widthGrow:1,]

基本上，我想实现一些功能，如formatter：rowClick中的“ responseCollapse”：

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"
},

解决方法

您可以从内置的 responseCollapse 格式化程序中复制一些代码以实现此目的。它将涉及访问一些私有变量，这有点顽皮，但可以做到这一点：

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';
        }
    }
}

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

javascript tabulator