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提交form表单简单示例分享
Mar 03 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
JavaScript作用域链实例详解
Jan 21 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
使用JS来动态操作css的几种方法
Dec 18 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高级编程-函数-郑阿奇
2011/07/04 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
vue中组件的3种使用方式详解
2019/03/23 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
调试Python程序代码的几种方法总结
2015/04/28 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
python基于event实现线程间通信控制
2020/01/13 Python
python全栈开发语法总结
2020/11/22 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
《两个铁球同时着地》教学反思
2014/02/13 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
低碳环保演讲稿
2014/08/28 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
单位接收函格式
2015/01/30 职场文书
不同意离婚代理词
2015/05/23 职场文书
电影圆明园观后感
2015/06/03 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏
vue3不同环境下实现配置代理
2022/05/25 Vue.js