layui 对table中的数据进行转义的实例


Posted in Javascript onSeptember 12, 2019

方法一 通过done回调进行遍历:

//方法级渲染
    table.render({
      id: 'demoList',
      elem: '#demoList'
      , url: 'showDemoList'
      , cols: [[
        {checkbox: true, fixed: true, width: '10%'}
        , {field: 'id', title: '编号', width: '15%', sort: true}
        , {field: 'pipe_id', title: '机构ID', width: '15%'}
        , {field: 'bank_id', title: '银行ID', width: '10%'}
        , {field: 'pipe_cost', title: '成本', width: '10%'}
        , {field: 'status', title: '状态', width: '20%'}
        , {field: 'remark', title: '操作', width: '20%', toolbar: '#toolBar'}
      ]],
      done: function (res, curr, count) {
        //如果是异步请求数据方式,res即为你接口返回的信息。
        //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
        $("[data-field='status']").children().each(function () {
          if ($(this).text() == '0') {
            $(this).text('有效');
          } else if ($(this).text() == '1') {
            $(this).text('无效');
          }
        });
      }
      , page: true
      , height: 'full-83'
    });

方法二 通过layui的templet模板实现:

, {field: 'status', title: '状态', width: '20%',templet:'#status'}
 
<script type="text/html" id="status">
  {{# if(d.status=='0'){ }}
  有效
  {{# }else{ }}
    无效
  {{# } }}
</script>

以上这篇layui 对table中的数据进行转义的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
jQuery 源码分析笔记(4) Ready函数
Jun 02 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
JavaScript中遍历的十种方法总结
Dec 15 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 #Javascript
小程序如何支持使用 async/await详解
Sep 12 #Javascript
layui清空,重置表单数据的实例
Sep 12 #Javascript
layui table 多行删除(id获取)的方法
Sep 12 #Javascript
详解Vue中CSS样式穿透问题
Sep 12 #Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 #Javascript
微信小程序之 catalog 切换实现解析
Sep 12 #Javascript
You might like
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
PHP数组相关函数汇总
2015/03/24 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
php常用字符函数实例小结
2016/12/29 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
Python 寻找局部最高点的实现
2019/12/05 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
中专生自我鉴定范文
2013/12/19 职场文书
银行员工职业规划范文
2014/01/21 职场文书
高考标语大全
2014/06/05 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS
Python爬虫基础初探selenium
2021/05/31 Python
详解Java实现数据结构之并查集
2021/06/23 Java/Android