layui-table对返回的数据进行转变显示的实例
2019-09-04 20:17
1356 查看
在使用layui表格时,在ajax请求回来的数据,有时候需要我们处理之后显示
1.比如性别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>
2.比如后台返回了一个时间段是2018-08-24 15:15:55 ,但是我们只需要显示年月日,这里我们就需要截取字符串
<script type="text/html" id="cTime"> {{# var fn = function(data){ return data.substring(0,10); }; }} {{ fn(d.cTime) }} </script>
上面的id名就对应你们表格里的字段,添加的自定工具条,如下图
3.在一个,表格中有很多按钮(修改,删除,等等),再做不同权限登录时,对应的角色要显示对应的按钮
从后台获取按钮权限
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-table对返回的数据进行转变显示的实例就是小编分享给大家的全部内容了,希望能给大家一个参考
您可能感兴趣的文章:
相关文章推荐
- 使用layui 渲染table数据表格的实例代码
- Android访问网络系列之--服务端返回XML或JSON格式数据,Android 进行解析并显示
- layui 对table中的数据进行转义
- GridView根据数据库返回的值,在显示到界面前对相关数据进行处理后显示
- Android访问网络系列之--服务端返回XML或JSON格式数据,Android 进行解析并显示
- Bootstrap-Table实现从服务器加载数据进行显示
- 如何控制table中的数据不进行换行显示
- Android访问网络:服务端返回XML或JSON格式数据,Android 进行解析并使用ListView显示
- Android 进行解析并显示服务端返回的数据
- 对数据进行分页,显示到table中
- 将json数据显示在table上,并对该数据进行简单的模糊搜索
- ajax数据返回进行遍历的实例讲解
- layui实现根据table数据判断按钮显示情况
- IOS第七天(4:UiTableView 数据的显示优化重复实例和tableFooterView和tableHeaderView)
- table 中 点击某行,获取这一行的数据弹框显示,或进行其他的操作
- bootstrap-table当查询后再去点击分页时,后台返回的数据是正确的,前台也显示正确了,但是当我点击分页时,列表会刷新为最初的数据,而不再是本次查询得到的数据
- TableModel应用实例--新增数据及时刷新显示
- Bootstrap-Table实现从服务器加载数据进行显示
- jquery ajax返回json数据进行前后台交互实例
- 对数据进行分页,显示到table中。