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 读取和设置文档元素的样式属性
Apr 14 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
javascript 短路法代码精简
Aug 20 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
jquery validate demo 基础
Oct 29 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 Javascript
js简单的分页器插件代码实例
Sep 11 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 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表单转换textarea换行符的方法
2010/09/10 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
单链表反转python实现代码示例
2018/02/08 Python
python3.6的venv模块使用详解
2018/08/01 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
践行三严三实心得体会
2014/10/13 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
2015年酒店工作总结
2015/04/28 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库