15年软件开发经验,只做源码定制!

原创设计定制开发

满足您的个性化需求

当前位置：首页前端开发 js

Layui数据表格动态加载表头

闫志林| 发布于 2021-12-15 22:55:47| 799阅读| 0点赞| 0评论

表头个数内容不确定时，动态加载表头

layui.use(['table'], function (args) {
			var table = layui.table;

			table.render({
				elem: "#data"
				, url: "{:url('index/index/getData')}" + "?id=" + $("#temp").val()
				, sort: false
				, cols: [[]]
				, done: function (res) {
					var myData = new Array();
					myData[0] = { field: "gacha_date", title: "DATE", align: 'center', sort: true, width: "8%" };
					myData[1] = { field: "entry", title: "ENTRY", align: 'center', sort: true, width: "8%" };
					myData[2] = {
						field: "all_rate", title: "WINNER", align: 'center', sort: true, width: "8%",
						templet: function (d) {
							return d.all_rate + "%";
						}
					};
					myData[3] = { field: "summax", title: "WINNER_SUM", align: 'center', sort: true, width: "8%" }; //前四个时固定的

					for (let i = 0, j = 4; i < res.data2.length; i++, j++) {
						myData[j] = { field: "items_desc"+i, title: res.data2[i]["items_desc"], width: "22.3%" }//从第五个开始添加动态表头和字段
					}
				
					table.init("testest", {
						cols: [myData],
						toolbar: true,
						data: res.data
						, limit: 10
					});

				}
			});
		});