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

 更新时间:2019年09月04日 20:17:23   作者:yufengaotian  
今天小编就为大家分享一篇layui-table对返回的数据进行转变显示的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

在使用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自定义ajax左侧三级菜单

    layui自定义ajax左侧三级菜单

    这篇文章主要为大家详细介绍了layui自定义ajax左侧三级菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 详解如何利用JavaScript绘制堆叠柱状图

    详解如何利用JavaScript绘制堆叠柱状图

    堆叠柱状图将每个柱子进行分割以显示相同类型下各个数据的大小情况。可以形象得展示一个大分类包含的每个小分类的数据,以及各个小分类的占比,显示的是单个项目与整体之间的关系。本文将利用JavaScript实现堆叠柱状图的绘制,需要的可以参考一下
    2022-03-03
  • javascript自执行函数之伪命名空间封装法

    javascript自执行函数之伪命名空间封装法

    比较之后,我们可以发现,第二方法更加的直观,易于理解。但是少了封装过程,代码完全裸露在外。
    2010-12-12
  • javascript模拟鼠标点击事件原理和实现方法

    javascript模拟鼠标点击事件原理和实现方法

    本文详细介绍了JS模拟鼠标点击事件的原理以及应用场景,并提供了模拟鼠标左键点击事件、右键点击事件、滚轮事件和移动事件的代码实现,了解JS模拟鼠标点击事件的原理和实现方法对于开发人员非常重要,这对于许多面向用户的web应用程序的开发和测试都具有很重要的意义
    2023-09-09
  • webpack中的代理配置详解

    webpack中的代理配置详解

    本文主要介绍了webpack中的代理配置详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 微信公众号服务器验证Token步骤图解

    微信公众号服务器验证Token步骤图解

    这篇文章主要介绍了微信公众号服务器验证Token步骤图解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • 实现div可编辑的常见方法总结

    实现div可编辑的常见方法总结

    实现div可编辑的常见方法总结...
    2007-04-04
  • 利用JS进行图片的切换即特效展示图片

    利用JS进行图片的切换即特效展示图片

    做网页时需要利用JS进行特效展示图片,下面是利用JS简单制作的图片的切换,需要的朋友可以了解下
    2013-12-12
  • Javascript中async与await的捕捉错误详解

    Javascript中async与await的捕捉错误详解

    这篇文章主要为大家详细介绍了Javascript中async与await的捕捉错误,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • 小程序获取当前位置加搜索附近热门小区及商区的方法

    小程序获取当前位置加搜索附近热门小区及商区的方法

    这篇文章主要介绍了小程序获取当前位置加搜索附近热门小区及商区的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04

最新评论