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 相关文章推荐
JavaScript TO HTML 转换
Jun 26 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
js比较日期大小的方法
May 12 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
JS实现点星星消除小游戏
Mar 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
PHP下对数组进行排序的函数
2010/08/08 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
jQuery 开天辟地入门篇一
2009/12/09 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
JsRender实用入门教程
2014/10/31 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
js实现星星打分效果
2020/07/05 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
在Python中处理时间之clock()方法的使用
2015/05/22 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
Python异常处理例题整理
2019/07/07 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
电气专业应届生求职信
2013/11/01 职场文书
大学生求职信范文应怎么写
2014/01/01 职场文书
说谎欺骗人检讨书300字
2014/11/18 职场文书
西安导游词
2015/02/12 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android