layui-table对返回的数据进行转变显示的实例

在使用layui表格时，在ajax请求回来的数据，有时候需要我们处理之后显示 1.比如性别sex这个字段，后台可能返回的是1.或者 2；那我们总不能显示1.和 2，我们需要显示男和女，这里就用到了自定义模板了 [removed] {{#if (d.sex == 1) { }} <span>男</span> {{# }else if(d.sex == 2){ }} <span>女</span> {{# } }} [removed] 2.比如后台返回了一个时间段是2018-08-24 15: 在使用layui表格时，我们经常会遇到需要对从服务器返回的数据进行格式化或转换的情况，以便在前端以更直观、友好的方式展示给用户。本文将详细介绍如何利用layui-table的自定义模板功能来实现这一目标。 1. **自定义模板处理性别字段** 在layui表格中，若后台返回的性别字段值为数字1或2，我们需要将其转换为“男”和“女”。这时，我们可以利用layui的模板引擎EJS来实现。在表格的`colunms`配置中，针对性别的列设置一个自定义模板，例如： ```html <script type="text/html" id="sex"> {{#if (d.sex == 1) { }} <span>男</span> {{# }else if(d.sex == 2){ }} <span>女</span> {{# } }} </script> ``` 这里的`id="sex"`可以与表格的某一列关联，确保数据正确渲染。 2. **截取字符串显示日期** 对于返回的时间段数据，如“2018-08-24 15:15:55”，我们仅需显示年月日部分。同样，通过自定义模板，我们可以实现字符串截取： ```html <script type="text/html" id="cTime"> {{#var fn = function(data){return data.substring(0,10);};}} {{ fn(d.cTime) }} </script> ``` 在这个例子中，定义了一个函数`fn`用于截取字符串，并在模板中调用该函数处理`cTime`字段的值。 3. **根据角色权限显示按钮** 在具有多种操作权限的表格中，我们需要根据用户的角色决定显示哪些按钮。这可以通过获取后端的权限数据并结合自定义模板来实现。从后台获取权限数据： ```javascript $.getJSON(weburl + "/menu/buttons", { "platform": platform, "url": relUrl }, function(data) { if (data.status === 1) { PAGE_BUTTON_AUTH = data.data; } }); ``` 然后，根据`PAGE_BUTTON_AUTH`对象的属性值，定义编辑和删除按钮的显示： ```html <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-table的自定义模板功能为我们提供了强大的数据处理能力，可以根据实际需求灵活地对返回的数据进行格式化和展示，同时结合后端权限控制，实现个性化界面。在实际项目中，我们可以充分利用这些特性，提升用户体验，打造高效、易用的Web应用。