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 相关文章推荐
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
jquery pagination插件实现无刷新分页代码
Oct 13 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
js中Function引用类型常见有用的方法和属性详解
Dec 11 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
详解CocosCreator项目结构机制
Apr 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
什么是MVC,好东西啊
2007/05/03 PHP
生成php程序的php代码
2008/04/07 PHP
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
web页面数据展示新想法(json)
2010/06/08 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
python求最大值最小值方法总结
2019/06/25 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
春季防火方案
2014/05/10 职场文书
工程部岗位职责
2015/02/10 职场文书