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中我们可能会有需要在执行完某一操作后使操作框变得不可选或者显示其他内容来进一步操作。例如: 这时我们就需要利用到layui中的一些语法: script type="text/html" id="对应操作栏的id"{{# if(条件){ }} a class="layui-btn layui-btn-xs layui-btn-
使用layui 在验证表单的时候写法如下 : link rel="stylesheet" href="layui/css/layui.css"script src="layui/layui.js"/scriptscript src="layui/lay/dest/layui.all.js"/scriptscriptlayui.use(['form', 'jquery'],function() { var $ = layui.jquery; var
layui中tree组件使用报错tree.render is not a function,错误信息如下: Uncaught TypeError:tree.render is not a functionat n .anonymoustree:21at c (layui.js?111:2)at r (layui.js?111:2) 解决方案一:可能你是用的layui的版本为2.5之前的版本,他将
调整layui的弹出框msg的字体大小以及其他样式: //文本里面可以加html标签let sure = layer.msg('span style="font-size:20px"确定喜欢她吗?/span', { time: 0 //0表示不自动关闭 ,time自动关闭所需毫秒 ,单位是毫秒(1秒=1000毫秒) , btn: ['span style="f
layui怎么隐藏列,该如何操作?加载完表格的操作: tableIns = table.render({ elem: '#tableDemo', url: '/pltTaskInfo/getDataByCondition', toolbar: '#toolbarDemo', cols: [cols], defaultToolbar: ['filter'], height: 'full-80', page: { limit: Table
Layui在table中使用select,这个要怎么操作呢? 1、穿梭框 Layui从2.5.0版本增加了穿梭框,但项目要求左右两边均是表格,无奈只好使用第三方的穿梭框。 2、左右两边的表列数显示不一样 在原代码的基础上修改,使之支持两表的列定义。 3、未选择行,两表中间的