layui怎么隐藏列,该如何操作?

2022-10-19前端开发
283

layui怎么隐藏列,该如何操作?加载完表格的操作:
 tableIns = table.render({
                elem: '#tableDemo',
                url: '/pltTaskInfo/getDataByCondition',
                toolbar: '#toolbarDemo',
                cols: [cols],
                defaultToolbar: ['filter'],
                height: 'full-80',
                page: {
                    limit: TableUIObj.onePageRecoeds,
                    limits: [10, 20, 30, 40, 50]
                },
                where: {
                    pltId: pltId,
                    deptId: deptId,
                    orderbyFields: upperFieldMatch(TableUIObj.orderbyFields),
                    orderbyUpdown: TableUIObj.orderbyUpdown
                },
                autoSort: false,
                parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态  跟版网整理
                        "data": res.data, //解析数据列表
                        "count": res.totleNum, //解析数据长度
                    };
                },
                request: {
                    limitName: 'pageSize' //每页数据量的参数名,默认:limit
                },
                done: function (res) {
                    if(pltType == '01'){
                        $('#add').hide();
                    }else{
                        $('#import').hide();
                        //隐藏某一列
                        $("[data-field='controlLevel']").css('display','none');
                    }
        })
或者layui数据表格中隐藏列方式,如果直接在定义列时隐藏: taskNo: {field: 'taskNo', title: '编码', sort: true, hide: true},
var colShowObj = {
            taskNo: {field: 'taskNo', title: '编码', sort: true, hide: true},
            controlLevel: {
                field: 'controlLevel', title: '关注等级', sort: true, hide: false, templet: function (d) {
                    return dictionaryObj['CONTROL_LEVEL']['object'][d.controlLevel] || ''
                }
            },
        }
 
The End
layui table 显示列 隐藏列

相关推荐

layui实现图片上传成功后回显点击放大图片功能
layui实现图片上传成功后回显点击放大图片功能,html代码部分: !-- html代码--div class="layui-form-item" label class="layui-form-label"上传图片/label div class="layui-input-block" button type="button" class="layui-btn" id="license-auth-letter-...
2025-09-06 前端开发
202

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图
Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果,最终效果如下图所示: 实现代码如下,在done函数中调用hoverOpenImg方法 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/postData', //width : 150...
2025-09-04 前端开发
112

layui点击文本输入框调起弹出选择框并选择内容的两种方法参考
我们在用到layui时候,需要点击文本输入框调起弹出选择框并选择内容,这个要怎么操作呢?以下两种方法可以参考: 1、点击名称,弹出信息弹框,选择表格中的某一行,实现效果如下: html页面代码 !--计量器具弹出层-- div id="equipment" lay-filter="equipmen...
2025-09-02 前端开发
167

js拖拽排序插件Sortable.js如何使用
由于项目功能需要,要实现对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好的满足这个需求,而且它还是开源的,于是乎就开始学习使用Sortable.js 特点 轻量级但功能强大 移动列表项时有动画 支持触屏设备和大多数浏览器(IE9及以下除外) 支持...
2025-06-12 前端开发
161

Layui treetable复选框联动解决方案
我们都知道layui treetable.js没有checked做联动。我们要实现Layui treetable复选框联动要怎么操作呢?实现的最终效果如下: 1. 在当前HTML文档checked监听函数中增加以下代码: //联动 table.on('checkbox(quan_list)', function(obj){ //console.log(obj);...
2025-06-06 前端开发
163

Layui中实现开关按钮的效果
按钮代码如下: {field: 'state', title: '状态', width: 85, templet: function (data) { if (data.state == 0) { return 'div input type="checkbox" checked="" name="codeSwitch" lay-skin="switch" id="open" lay-filter="switchTest" switchId=' + data...
2025-04-13 前端开发
112