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


Posted in Javascript onSeptember 04, 2019

在使用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名就对应你们表格里的字段,添加的自定工具条,如下图

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

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对返回的数据进行转变显示的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 Javascript
layui table数据修改的回显方法
Sep 04 #Javascript
Vue实现商品详情页的评价列表功能
Sep 04 #Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 #Javascript
解决layui表格的表头不滚动的问题
Sep 04 #Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 #Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 #Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 #Javascript
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
js实现蒙版效果
2020/01/11 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
浅谈Python爬虫基本套路
2019/03/25 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
python 如何实现遗传算法
2020/09/22 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
总经理办公室主任岗位职责
2013/11/12 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
个人安全生产责任书
2014/07/28 职场文书
2014年度个人工作总结
2014/11/07 职场文书
新学期开学标语2015
2015/07/16 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
Python数据结构之队列详解
2022/03/21 Python
Golang日志包的使用
2022/04/20 Golang