layui表格接收返回的集合中另一个集合的数据
时间: 2024-05-19 16:10:47 浏览: 97
可以使用 layui 的自定义格式功能来实现在表格中显示集合中的另一个集合的数据。具体步骤如下:
1. 在接收到后端返回的数据后,对数据进行处理,将需要显示在表格中的数据存入一个新的数组中。
2. 在 layui 的数据表格中,通过设置 templet 属性来自定义数据格式。在 templet 中,可以使用 layui 的模板引擎语法来获取数组中的数据,并将其显示在表格中。
例如,在以下示例中,我们从后端返回的数据中提取了需要显示在表格中的字段(包括一个嵌套的集合),并将其存入一个新的数组中:
```javascript
var data = [
{
id: '1',
name: '张三',
age: 18,
contact: {
phone: '13888888888',
email: 'zhangsan@example.com'
}
},
{
id: '2',
name: '李四',
age: 20,
contact: {
phone: '13999999999',
email: 'lisi@example.com'
}
}
];
// 处理数据,提取需要显示在表格中的字段
var tableData = [];
layui.each(data, function(index, item) {
tableData.push({
id: item.id,
name: item.name,
age: item.age,
phone: item.contact.phone,
email: item.contact.email
});
});
```
然后,在 layui 的数据表格中,设置 templet 属性来自定义数据格式,并使用模板引擎语法来获取数组中的数据:
```html
<table id="demo" lay-filter="test"></table>
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo',
data: tableData,
cols: [[
{field:'id', title:'ID'},
{field:'name', title:'姓名'},
{field:'age', title:'年龄'},
{field:'contact', title:'联系方式', templet: function(d){
// 使用模板引擎语法获取嵌套集合中的数据
return d.phone + '<br>' + d.email;
}}
]]
});
});
</script>
```
在上述示例中,我们使用了 templet 属性,并在 templet 中通过 d.phone 和 d.email 来获取嵌套集合中的数据,并将其拼接成一个字符串显示在表格中。这样,就可以在 layui 的数据表格中显示集合中的另一个集合的数据了。
阅读全文