如何解决通过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");
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。