irpas技术客

LayUI Table列的显示与隐藏:使用hide属性_风雪小喜_layui-hide

网络投稿 5356

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] }); }


1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。

标签: #layuihide #layui #1单独定义表格形式let #cols1