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 相关文章推荐
FCK调用方法..
Dec 21 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
ExtJS自定义主题(theme)样式详解
Nov 18 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
前端微信支付js代码
Jul 25 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 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
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
vue组件生命周期详解
2017/11/07 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
python获取本机mac地址和ip地址的方法
2015/04/29 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
网络技术专业求职信
2014/02/18 职场文书
企业元宵节主持词
2014/03/25 职场文书
初中英语课后反思
2014/04/25 职场文书
品牌推广策划方案
2014/05/28 职场文书
通信工程专业求职信
2014/06/04 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
Nginx进程调度问题详解
2021/09/25 Servers