Layui表格动态隐藏字段必灵

layui表格动态隐藏字段

var phoneTableIns = table.render({
	elem: '#idTest' 
	, url: ''//数据接口地址
	, height: 500 //容器高度
	page: true,//开启分页
	limit: 10,
	limits: [5, 10, 15, 20],
	, cols: [
		{ field: 'phone', title: "手机号", align: 'center', }
	]], 
	done: function (res, curr, count) {
		// 根据接口返回字段is_show_phone是否展示字段,注意会影响表格的所有相同字段
		if (res.data.length > 0 && res.data[0].is_show_phone == 1) {
			phoneTableIns.showCol(data.elem.getAttribute('data-type'), 'phone');// 显示
		} else {
			phoneTableIns.hideCol(data.elem.getAttribute('data-type'), 'phone');// 隐藏
		}
	}
});
可以通过layui的table模块的cols属性中的hide属性来控制表格字段的显示和隐藏。 例如,我们有一个id、name、age和email四个字段表格: ```html <table id="demo" lay-filter="test"></table> ``` ```javascript layui.use('table', function(){ var table = layui.table; table.render({ elem: '#demo', url: '/demo/table/user/', cols: [[ {field:'id', hide:true}, {field:'name', title: '姓名'}, {field:'age', title: '年龄'}, {field:'email', title: '邮箱'} ]] }); }); ``` 在上述代码中,通过在cols属性中设置hide为true,即可将id字段隐藏起来。 如果需要动态控制表格字段的显示和隐藏,可以使用table模块的reload方法重新渲染表格,并在cols属性中设置hide属性的值来控制表格字段的显示和隐藏。 例如,我们定义一个按钮来控制表格中的id字段的显示和隐藏: ```html <div> <button id="toggleBtn" class="layui-btn layui-btn-primary">隐藏ID字段</button> </div> <table id="demo" lay-filter="test"></table> ``` ```javascript layui.use('table', function(){ var table = layui.table; table.render({ elem: '#demo', url: '/demo/table/user/', cols: [[ {field:'id', hide:true}, {field:'name', title: '姓名'}, {field:'age', title: '年龄'}, {field:'email', title: '邮箱'} ]] }); $('#toggleBtn').on('click', function(){ var hideId = !table.config.cols[0][0].hide; table.reload('demo', { cols: [[ {field:'id', hide: hideId}, {field:'name', title: '姓名'}, {field:'age', title: '年龄'}, {field:'email', title: '邮箱'} ]] }); $('#toggleBtn').text(hideId ? '显示ID字段' : '隐藏ID字段'); }); }); ``` 在上述代码中,我们定义了一个按钮,并在按钮的点击事件中调用了table模块的reload方法来重新渲染表格,并根据hideId的值来控制id字段的显示和隐藏。同时,我们也修改了按钮的文本来反映当前id字段的显示状态。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

whaxkl

该打赏续费了

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值