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 each函数的链式调用
Jul 22 Javascript
jquery应该如何来设置改变按钮input的onclick事件
Dec 10 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
Mar 18 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
微信小程序与webview交互实现支付功能
Jun 07 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脚本的测试方法
2015/08/05 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
详解Django CAS 解决方案
2019/10/30 Python
python dumps和loads区别详解
2020/02/04 Python
Keras实现DenseNet结构操作
2020/07/06 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
怎么写有吸引力的自荐信
2013/11/17 职场文书
分层教学实施方案
2014/03/19 职场文书
毕业论文评语大全
2014/04/29 职场文书
2014年党支部承诺书
2014/05/30 职场文书
安全施工责任书
2014/08/25 职场文书
四风问题对照检查材料
2014/09/22 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
农村文化建设标语
2014/10/07 职场文书
党支部书记岗位职责
2015/02/15 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
MYSQL 运算符总结
2021/11/11 MySQL