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实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
javascript自启动函数的问题探讨
Oct 05 Javascript
JS的数组迭代方法
Feb 05 Javascript
学习Angularjs分页指令
Jul 01 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
微信小程序实现带放大效果的轮播图
May 26 Javascript
Js图片点击切换轮播实现代码
Jul 27 Javascript
JS + HTML 罗盘式时钟的实现
May 21 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
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
php购物车实现方法
2015/01/03 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
package.json文件配置详解
2017/06/15 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
python 如何引入协程和原理分析
2020/11/30 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
优秀的教师个人的中文求职信
2013/09/21 职场文书
装修五一活动策划案
2014/01/23 职场文书
医德医风演讲稿
2014/05/20 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
护理专科学生自荐书
2014/07/05 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技