layui表格数据转换与权限按钮控制详解
本文介绍layui表格中如何处理后台返回数据以优化前端展示。通过自定义模板实现性别字段的数值转文字显示,以及时间字符串的截取格式化。同时结合后台接口获取按钮权限,动态控制表格操作列中修改、删除等按钮的显示与隐藏,满足不同角色的访问需求。
layui表格数据预处理概述
在使用layui表格组件时,通过Ajax请求获取后端数据后,往往需要对原始数据进行预处理或格式转换,以便在前端更直观地展示。
自定义模板处理性别与时间显示
例如,后端返回的性别字段sex可能仅为数字1或2,直接显示数字不够友好。此时需要利用自定义模板将数值映射为具体的文本,如将1显示为男,2显示为女。
<script type="text/html" id="barDemo">
{{#if (d.sex == 1) { }}
<span>男</span>
{{# }else if(d.sex == 2){ }}
<span>女</span>
{{# } }}
</script>
另一个常见场景是时间格式处理。若后端返回完整的时间字符串如2018-08-24 15:15:55,而前端仅需展示年月日部分,则需通过字符串截取操作保留前10个字符。
<script type="text/html" id="cTime">
{{#
var fn = function(data){
return data.substring(0,10);
};
}}
{{ fn(d.cTime) }}
</script>
上述模板中的字段名需与表格配置的列字段名保持一致。通过添加自定义工具条,可以实现上述数据转换逻辑,具体效果可参考相关图示。

基于权限控制的操作按钮显示
此外,表格中常包含修改、删除等操作按钮。在实现不同角色登录系统时,需根据用户权限动态显示对应的操作按钮,确保权限控制的准确性。
按钮的权限状态通常由后端接口返回,前端需获取这些权限数据并据此决定是否渲染相应的操作按钮。
var PAGE_BUTTON_AUTH = {
"add": false,
"edit": false,
"delete": false
};
$(function () {
//按钮权限验证
var url = window.location.href.replace("//", "");
var relUrl = url.substring(url.lastIndexOf("/") + 1);
//去掉参数部分
if (relUrl.indexOf("?") !== -1) {
relUrl = relUrl.split("?")[0];
}
$.getJSON(weburl + "/menu/buttons",
{ "platform": platform, "url": relUrl },
function (data) {
if (data.status === 1) {
PAGE_BUTTON_AUTH = data.data;
}
<script type="text/html" id="barDemo">
{{#if (PAGE_BUTTON_AUTH.edit) { }}
<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
{{# }else{ }}
<span>- </span>
{{# } }}
{{#if (PAGE_BUTTON_AUTH.delete) { }}
<a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
{{# }else{ }}
<span>- </span>
{{# } }}
</script>
以上介绍了layui表格中数据转换与权限按钮控制的实现方法,希望能为开发者提供参考。
JS 怎么使用 pako.js 解压 gzip 数据流
2026-11-05 15:54:33
零基础先学JavaScript还是Python?对比学习难度与上手曲线
2026-11-05 14:47:40
JS代码反混淆:主流在线工具与本地软件推荐
2026-11-04 19:28:41
浏览器控制台查看格式化JSON有哪些实用技巧
2026-11-04 16:56:53
JS控制台打印基础:console.log语法与多参数用法
2026-11-04 09:23:11
