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利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
javascript仿qq界面的折叠菜单实现代码
Dec 12 Javascript
jQuery中delegate与on的用法与区别示例介绍
Dec 20 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
Javascript函数式编程语言
Oct 11 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
javascript使用链接跨域下载图片
Nov 01 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
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
php中的登陆login实例代码
2016/06/20 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
python excel多行合并的方法
2020/12/09 Python
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
一份Java笔试题
2012/02/21 面试题
高中的自我鉴定
2013/12/16 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
个人借条范本
2015/05/25 职场文书
法律讲堂观后感
2015/06/11 职场文书
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python