layui表格列动态显示或隐藏

问题描述：多个功能使用同一个页面时，有时要求不同的功能中展示的表格列数据不同，这就需要动态设置表格列的显示或隐藏。

解决方案：layui渲染表格数据后有个完成的回调函数，在回调函数中根据你的逻辑条件动态设置相应列的显示/隐藏样式，代码如下：

// 此处只给出了关键代码
table.render({elem: '#tableId',url: 'xxxUrl',cols: [[{field: 'testA',title: 'testA'},{field: 'testB',title: 'testB'}]],done: function (res, curr, count) { // 表格渲染完成之后的回调if (res.count == null) { // 无数据时直接返回了return;}// 获取第一列testA的值，此处是根据首列testA的值来判断是否显示testA列// 这里可以换成你的逻辑，也可以对其它列做处理var testAValue = res.data[0].testA;if(testAValue != 1){// 符合隐藏条件的设置隐藏样式，关键代码！$("[data-field='testA']").css('display','none');}// 重新渲染table.render('select');}});

问题解决。

layui表格列动态显示或隐藏相关推荐

LayUI表格筛选功能出现隐藏列的解决办法
某些业务场景需要把一些信息带入页面,而这些信息又不用给展示出来,一般来说想到的就是隐藏列,利用LayUI表格的 hide:true 就能实现,它还提供筛选功能,但LayUI的表格筛选功能就有个问题,就 ...
Vue动态控制表格列的显示隐藏
效果如上图所示,点击table右上方的表格按钮,弹出菜单栏,进行勾选,从而达到表格对应列显示和隐藏 1.HTML部分(ant design) <div class="right-bt ...
element-table在实现columns（表格列）显示隐藏过程中由于show-overflow-tooltip导致的渲染问题
背景刚开始为了写表格方便所以在使用element时候使用v-for循环来写,所以代码类似于如下 <el-table-columnv-for="(item, index) in tab ...
计算layui表格列总和
做项目过程中,除了要实现客户各种功能的需求,处理各种数据也是不可避免的,计算总和.比率.平均数等等,基本上,数学中有学过的运算都会用到哦.下面演示一下基础的,layui表格,怎样计算其总和?能实现该功 ...
Vue控制表格列的显示隐藏
table控制列显示隐藏的功能当选中时 table列显示,未选中时隐藏该列首先造轮子全局拿来用 // 这是子组件 <template><div style="text ...
layui表格列自动适应大小失效
从官网复制的表格,修改成自适应宽度后失效,原因如下:
layui表格内文本超出隐藏问题
只需要更改样式即可图片: 代码如下 .layui-table-cell{height:auto;overflow:visible;text-overflow:inherit;
antd 表格列宽自适应方法以及错误处理
当不给某列设置宽度时这一列的宽度等于: (表格宽度-有宽度列的宽度)/没有固定宽度的列的数量也就是没有设置宽度的列会平分表格中余下的宽度在antd 的表格中, 当你不设置表格滚动, 并且你给每一列 ...
Layui表格数据值相加（一）
开发工具与关键技术: Visual Studio done回调作者:黎凤焕撰写时间:2019年 7 月 19 日 Layui表格列数据(金额数据列的数据自动相加)相加,将总金额赋值给input框, ...

layui表格列动态显示或隐藏

layui表格列动态显示或隐藏相关推荐

最新文章

热门文章