LayUI Table列的显示与隐藏:使用hide属性

LayUI Table列的显示与隐藏可以通过CSS样式来控制,但是效果不是很满意。这里我通过修改列hide属性后重载表格来实现个别列的显示与隐藏。 1.单独定义表格形式: let cols1 = [ { type: 'numbers', title: '序号', width: 60, align: 'center' } , { field: 'M
LayUI Table列的显示与隐藏可以通过CSS样式来控制,但是效果不是很满意。这里我通过修改列hide属性后重载表格来实现个别列的显示与隐藏。
1.单独定义表格形式:
let cols1 = [
                    { type: 'numbers', title: '序号', width: 60, align: 'center' }
                    , { field: 'MerchantNo', title: '单位编号', width: 180, align: 'center' }
                    , { field: 'MerchantName', title: '单位名称', width: 180, align: 'center' }
                    , { field: 'Province', title: '省份', width: 120, align: 'center' }
                    , { field: 'Contacts', title: '联系人', width: 120, align: 'center' }
                    , { field: 'ContactPhp', title: '联系电话', width: 120, align: 'center' }
                    , { field: 'Fox', title: '传真', width: 100, align: 'center' }
                    , { field: 'EMail', title: '邮箱地址', width: 120, align: 'center' }
                    , { field: 'Address', title: '公司地址', width: 120, align: 'center' }
                    , { field: 'Synopsis', title: '公司简介', align: 'center' }
                    , { field: 'AdminCount', title: '允许账号数目', width: 100, align: 'center', hide: true }
                    , { field: 'Duetime', title: '有效期', width: 110, align: 'center', hide: true }
                    , { field: 'IsEnable', title: '状态', width: 100, align: 'center', templet: '#IsEnabledTpl' }
                    , { fixed: 'right', title: '操作', width: 125, align: 'center', toolbar: '#barOperation' }
            ];
2.根据需求修改列的属性:
var isReload = false;
                    if (res[0]['ShowOther'] == '0') {
                        if (!cols1[10].hide) {
                            isReload = true;
                        }
                        cols1[10].hide = true;
                        cols1[11].hide = true;
                    } else {
                        if (cols1[10].hide) {
                            isReload = true;
                        }
                        cols1[10].hide = false;
                        cols1[11].hide = false;
                    }
3.对表格重载:
if (isReload) {
                        insTb.reload({
                            cols: [cols1]
                        });
                    }
 
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

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-
Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果,最终效果如下图所示: 实现代码如下,在done函数中调用hoverOpenImg方法 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/postData', //width : 150
我们在用到layui时候,需要点击文本输入框调起弹出选择框并选择内容,这个要怎么操作呢?以下两种方法可以参考: 1、点击名称,弹出信息弹框,选择表格中的某一行,实现效果如下: html页面代码 !--计量器具弹出层-- div id="equipment" lay-filter="equipmen
由于项目功能需要,要实现对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好的满足这个需求,而且它还是开源的,于是乎就开始学习使用Sortable.js 特点 轻量级但功能强大 移动列表项时有动画 支持触屏设备和大多数浏览器(IE9及以下除外) 支持
我们都知道layui treetable.js没有checked做联动。我们要实现Layui treetable复选框联动要怎么操作呢?实现的最终效果如下: 1. 在当前HTML文档checked监听函数中增加以下代码: //联动 table.on('checkbox(quan_list)', function(obj){ //console.log(obj);
按钮代码如下: {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