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 相关文章推荐
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
JavaScript获取多个数组的交集简单实例
Nov 11 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
Vue.js对象转换实例
Jun 07 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 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实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
js变换显示图片的实例
2013/04/16 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
js定时器实例分享
2016/12/20 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
Python函数参数类型*、**的区别
2015/04/11 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
Python自定义线程类简单示例
2018/03/23 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
Python匿名函数及应用示例
2019/04/09 Python
python版DDOS攻击脚本
2019/06/12 Python
python+pygame实现坦克大战
2019/09/10 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
2016春季幼儿园小班开学寄语
2015/12/03 职场文书