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的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
angularjs $http实现form表单提交示例
Jun 09 Javascript
layui select动态添加option的实例
Mar 07 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
微信用户访问小程序的登录过程详解
Sep 20 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 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
计数器详细设计
2006/10/09 PHP
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
鼠标图片振动代码
2006/07/06 Javascript
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
JavaScript 学习初步 入门教程
2010/03/25 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
外贸业务员岗位职责
2013/11/24 职场文书
幼儿园家长会欢迎词
2014/01/09 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
清明节随笔
2015/08/15 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS