【Layui】Layui表格动态生成列
在Layui框架中，我们可以使用表格（Table）组件来动态生成列。以下是一个简单的示例，展示如何根据数据动态生成列：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui 动态生成列</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css" media="all">
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>
<script>
layui.use(['table'], function(){
var table = layui.table;
// 假设我们从服务器获取的数据如下
var data = [
{
"id": 1,
"name": "张三",
"score": 80,
"subject": "数学"
},
{
"id": 2,
"name": "李四",
"score": 90,
"subject": "语文"
}
// ... 更多数据
];
// 提取列字段
var cols = [];
for (var field in data[0]) {
if (field != 'id') { // 假设我们不需要显示'id'字段
cols.push({
field: field,
title: field
});
}
}
// 动态生成表格
table.render({
elem: '#test',
cols: [
[cols] // 这里是一个二维数组，包含我们的所有列配置
],
data: data
});
});
</script>
</body>
</html>
在这个例子中，我们首先定义了一个假设的数据集合。然后我们遍历数据中的第一条记录，根据字段动态生成列配置数组 cols。最后，我们使用Layui的表格组件来渲染表格，并指定列配置和数据。这样就可以根据数据动态生成列了。
1747
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
