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 相关文章推荐
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
javascript常用功能汇总
Jul 05 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
python的依赖管理的实现
2019/05/14 Python
python提取xml里面的链接源码详解
2019/10/15 Python
python mysql中in参数化说明
2020/06/05 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
女大学生毕业找工作的自我评价
2013/10/03 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
写给领导的感谢信
2015/01/22 职场文书
财务稽核岗位职责
2015/04/13 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android