我需要的是在table 中渲染html数据,不是在cols中渲染。
时间: 2024-03-05 08:49:23 浏览: 39
如果需要在表格中渲染 HTML 数据,可以在数据源中的某些字段中存储 HTML 字符串,然后在表格的 render 回调函数中将这些 HTML 字符串渲染到表格中。
具体实现步骤如下:
1. 在数据源中定义一个字段,用于存储 HTML 字符串。例如,以下数据源中的 content 字段存储了 HTML 字符串:
```
var data = [
{id: 1, title: '文章1', content: '<p>这是一段 <a href="#">链接</a></p>'},
{id: 2, title: '文章2', content: '<p>这是另一段 <b>加粗</b> 文字</p>'},
// ...
];
```
2. 在表格的 render 回调函数中,通过 data.elem 参数获取当前渲染的 DOM 元素,然后将 content 字段中存储的 HTML 字符串渲染到该元素中。例如,以下代码中的 render 回调函数中,通过 jQuery 的 html() 方法将 content 字段中的 HTML 字符串渲染到表格中:
```
table.render({
// ...
cols: [[
{field: 'id', title: 'ID'},
{field: 'title', title: '标题'},
{field: 'content', title: '内容', templet: function(d){
return '<div class="layui-table-cell laytable-cell-1-content">' + d.content + '</div>';
}},
]],
// ...
done: function(res, curr, count){
// 渲染完成后,初始化表格中的 HTML 标签
$(data.elem).find('.layui-table-cell').each(function(){
$(this).html($(this).text());
});
}
});
```
3. 在表格渲染完成后,需要对表格中的 HTML 标签进行初始化。因为 layui 默认会对表格中的 HTML 标签进行转义,导致标签不会被解析,需要手动对表格中的 HTML 标签进行初始化。例如,以上代码中的 done 回调函数中,通过 jQuery 的 each() 方法遍历表格中的每一个单元格元素,然后将其内部的 HTML 标签初始化。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)