layui数据表格动态渲染表头

在项目中利用layui数据表格的时候遇见几次需要动态渲染表头的情况,查了些资料,总结了一下,总体都是讲数据表格渲染列的cols:[]这部分代码拿出来进行操作。
当需要对页面中表格进行切换时,对于不同表头需要根据一个切换状态值进行渲染。

	var head = {
			title: [
					{
						id: 0,
						data: [
							{ field: 'name', title: '姓名', width: '8%' }
							,{ field: 'id', title: '编号 ', width: '10%' }
						, { field: 'petitionList', title: '操作',toolbar: '#barDemo' }
						]
					},
					{
						id: 1,
						data: [
							{ field: 'name', title: '姓名', width: '7%' }
							,{ field: 'sex', title: '性别', width: '10%' }
						, { field: 'age', title: '年龄', width: '10%',templet:function(d){
							return '<div style="text-align:left"></div>'
						} }
						, { field: 'petitionList', title: '操作',toolbar: '#barDemo1' }
							]
					}
			]
	};
	//切换表头
	function gethead(id) {
    let result = head.title[0].data;
    head.title.forEach(item => {
        if (id == item.id) {
            result = item.data
        }
    });
		// console.log(result)
    return result;
	}
		// tab标签切换
			element.on('tab(test)', function (data) {
				state = $(".layui-this").attr('s')
				//这两句话很重要,不然表头会重复渲染
				$("#mytable").empty();
		        $("#mytable").append('<table class="layui-hide bhtable" id="LAY_table_user" lay-filter="user" lay-size="lg"></table><div class="notip" style="position:absolute;z-index:9999;top:68%;left:50%;margin-left:-24px;color:#999">无数据</div>')
					table.render({
							elem: '#LAY_table_user'
							,url: ''
						,	method: 'post'
				            , cols: [gethead(state)]
				            , id: 'testReload'
				            , page: true
						, limit: 20 //每页默认显示的数量
						, response: {
							statusCode: 200 //重新规定成功的状态码为 200,table 组件默认为 0
						}
						, parseData: function (res) { //res 即为原始返回的数据
							return {
								"code": res.code, //解析接口状态
								"msg": res.message, //解析提示文本
								"count": res.data.total, //解析数据长度
								"data": res.data.list //解析数据列表
							};
						}
						, done: function (res, curr, count) {
							$(".layui-table-main td").css("cursor", "pointer");
							
						}
				});
		
			})

当需要调用ajax渲染表头时,同样的原理,定义变量然后根据cols格式进行ajax渲染后插入到表格中。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值