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 form 验证函数 弹出对话框形式
Jun 23 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
js获取url传值的方法
Dec 18 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
element-ui表格合并span-method的实现方法
May 21 Javascript
详解用async/await来处理异步
Aug 28 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 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
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
python3中bytes和string之间的互相转换
2017/02/09 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
python2.7实现邮件发送功能
2018/12/12 Python
Python pip配置国内源的方法
2020/02/14 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
国际领先的学术出版商:Springer
2017/01/11 全球购物
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
医学专业毕业生个人求职信
2013/12/25 职场文书
毕业生个人求职信范文分享
2014/01/05 职场文书
培训讲师邀请函
2014/01/10 职场文书
教师岗位职责
2015/02/03 职场文书
离职信范本
2015/06/23 职场文书
小学校长开学致辞
2015/07/29 职场文书
Python提取PDF指定内容并生成新文件
2021/06/09 Python