layui table 数据转义的两种实现方式
作者:资源驿站时间:2026-10-23 11:02:42浏览:346
本文介绍在 layui 表格组件中处理数据转义的两种常用方法。第一种利用 done 回调函数遍历表格元素进行动态修改;第二种通过定义 templet 模板,在 HTML 中直接控制数据显示逻辑。两种方案均能有效解决表格内容展示问题,开发者可根据具体需求选择合适实现。
layui table 数据转义方法
第一种方案是利用 done 回调函数进行遍历处理。
//方法级渲染
table.render({
id: 'demoList',
elem: '#demoList'
, url: 'showDemoList'
, cols: [[
{checkbox: true, fixed: true, width: '10%'}
, {field: 'id', title: '编号', width: '15%', sort: true}
, {field: 'pipe_id', title: '机构ID', width: '15%'}
, {field: 'bank_id', title: '银行ID', width: '10%'}
, {field: 'pipe_cost', title: '成本', width: '10%'}
, {field: 'status', title: '状态', width: '20%'}
, {field: 'remark', title: '操作', width: '20%', toolbar: '#toolBar'}
]],
done: function (res, curr, count) {
//如果是异步请求数据方式,res即为你接口返回的信息。
//如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
$("[data-field='status']").children().each(function () {
if ($(this).text() == '0') {
$(this).text('有效');
} else if ($(this).text() == '1') {
$(this).text('无效');
}
});
}
, page: true
, height: 'full-83'
});
第二种方案则是借助 layui 提供的 templet 模板功能来实现。
, {field: 'status', title: '状态', width: '20%',templet:'#status'}
<script type="text/html" id="status">
{{# if(d.status=='0'){ }}
有效
{{# }else{ }}
无效
{{# } }}
</script>
上述内容即为 layui 表格数据转义的完整示例,希望能为读者提供有价值的参考,同时也感谢大家的支持与关注。
作者最新文章
JS中使用位运算(~~)和一元加号(+)快速转换字符串为整数
2026-11-03 22:41:12
怎么使用命令行批量格式化项目中的JS文件
2026-11-03 19:04:42
JS代码美化后报错怎么办?常见格式化冲突解决方法
2026-11-03 18:47:01
不用moment.js,怎么用原生JS Intl API格式化时间戳
2026-11-03 18:10:30
原生JS与dayjs获取当前日期的代码对比
2026-11-03 17:57:26
