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(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
IE JS编程需注意的内存释放问题
Jun 23 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
javascript系统时间设置操作示例
Jun 17 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 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如何透过ODBC来存取数据库
2006/10/09 PHP
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
CURL状态码列表(详细)
2013/06/27 PHP
js 自制滚动条的小例子
2013/03/16 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
python基础教程之数字处理(math)模块详解
2014/03/25 Python
python私有属性和方法实例分析
2015/01/15 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
python实现小球弹跳效果
2019/05/10 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
python 图片去噪的方法示例
2019/07/09 Python
Python如何批量生成和调用变量
2020/11/21 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
DBA的职责都有哪些
2012/05/16 面试题
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
校长四风对照检查材料
2014/09/27 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
寒假生活随笔
2015/08/15 职场文书
初中历史教学反思
2016/02/19 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
python小程序之飘落的银杏
2021/04/17 Python