layui渲染表格时通过field读取data中数据时,如何获取数据中包含的列表
时间: 2023-06-19 07:09:50 浏览: 145
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
5星 · 资源好评率100%
在layui中,当渲染表格时,可以通过 field 属性来指定表格中每一列对应的数据字段。当数据中包含列表时,可以使用自定义模板的方式来渲染列表数据。
具体操作如下:
1. 在 field 属性中指定包含列表数据的字段,例如:
```
table.render({
elem: '#demo',
data: [{
id: 10001,
name: '张三',
hobbies: ['篮球', '足球', '游泳']
}, {
id: 10002,
name: '李四',
hobbies: ['唱歌', '跳舞', '画画']
}],
cols: [[
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'},
{field: 'hobbies', title: '爱好'}
]]
});
```
2. 使用自定义模板来渲染包含列表数据的单元格,例如:
```
table.render({
elem: '#demo',
data: [{
id: 10001,
name: '张三',
hobbies: ['篮球', '足球', '游泳']
}, {
id: 10002,
name: '李四',
hobbies: ['唱歌', '跳舞', '画画']
}],
cols: [[
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'},
{field: 'hobbies', title: '爱好', templet: function(d){
var html = '';
layui.each(d.hobbies, function(index, item){
html += item + '、';
});
return html.substr(0, html.length - 1);
}}
]]
});
```
在这个例子中,我们使用自定义模板来渲染爱好列的单元格。在模板中,我们使用 layui.each 方法遍历 hobbies 列表,将列表中的每个元素拼接成一个字符串,并返回该字符串作为单元格的内容。需要注意的是,由于最后一个元素后面不能有分隔符,所以我们需要使用 substr 方法将最后一个分隔符去掉。
阅读全文