layui 对table中的数据进行转义的实例

方法一 通过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中的数据进行转义的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • layui table设置前台过滤转义等方法

    如下所示: {field: 'username', title: '用户名', width:80,style:'height:100px;',templet: '#titleTpl'} 然后再最后加上 <script type="text/html" id="titleTpl"> {{# if(d.username=='user-0'){ }} 转义用户0 {{# } else if(d.username=='user-1') { }} 转义用户1 {{

  • layui 对table中的数据进行转义的实例

    方法一 通过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:

  • 在layui中对table中的数据进行判断(0、1)转换为提示信息的方法

    需要把"1"改成中文汉字: 在 done方法里面进行数据渲染: layui.use('table', function(){ var table = layui.table ,form = layui.form; tableIns=table.render({ elem: '#bankList', url:'/bank/bankList', method: 'post', //默认:get请求 cellMinWidth: 80, page: true, request: { pageN

  • js与jQuery实现获取table中的数据并拼成json字符串操作示例

    本文实例讲述了js与jQuery实现获取table中的数据并拼成json字符串操作.分享给大家供大家参考,具体如下: 核心代码如下: JavaScript代码: function tabToJSON(id) { var trs = document.getElementById(id).getElementsByTagName("tr");//获得tr数组 var titles = trs[0].getElementsByTagName("td"); //获得表头t

  • Layui之table中的radio在切换分页时无法记住选中状态的解决方法

    情景描述 Layui数据表格中用到了表单元素radio,在当前页面选中radio状态,并同步更新到保存表格中所有的数据的数组中(获取表格中的所有数据并保存到数组中),再点击分页组件中的下一页.上一页.跳转按钮进行切换另外一个页面,然后在切换回之前的页面,会发现在以前页面上radio状态全部恢复默认了,我们当然是希望能保存住前一页radio的选中状态. 我写项目遇到的一个的情况:在第一页选中的radio的状态,点击下一页按钮切换到第二页,然后再点击上一页切换会第一页,第一页中的radio状态就恢复

  • layui的table中显示图片方法

    图片需要用到模板.templet: 注意div不可省略,48px指的是div的高度,如果要决定img图片的高度,需要单独设计style <script type="text/javascript"> layui.use('table',function () { var table= layui.table; table.render({ elem:'#needstable' ,url:'{:url()}' ,method:'post' ,cellMinWidth:80 ,

  • Oracle表中重复数据去重的方法实例详解

    Oracle表中重复数据去重的方法实例详解 我们在项目中肯定会遇到一种情况,就是表中没有主键 有重复数据 或者有主键 但是部分字段有重复数据 而我们需要过滤掉重复数据 下面是一种解决方法 delete from mytest ms where rowid in (select aa.rid from (select rowid as rid, row_number() over(partition by s.name order by s.id) as nu from mytest s) aa

  • 时间序列预测中的数据滑窗操作实例(python实现)

    时间序列预测中的数据滑窗操作实例(python实现)

    目录 撰写背景 什么是数据滑窗 代码实现 单特征时间序列 多特征时间序列 注意事项 总结 撰写背景 面向数据分析的小白,水平有限,错误难免,欢迎指正. 什么是数据滑窗 进行机器学习时,一般都要涉及到划分训练集和测试集的步骤.特别地,在做数据预测时,一般把预测的依据(也就是历史数据)称作X,把需要预测的数据称为y.即首先把原始数据划分为train_X, train_y这两个训练数据集和test_X, test_y这两个测试数据集. 对于时间序列数据的预测,往往是建立由好几个历史数据预测下一时刻的未

  • jquery对table中各数据的增加、保存、删除操作示例

    jquery对table中各数据的增加、保存、删除操作示例

     像这种页面,我们往往不是通过提交表单来处理这些数据,因为如果在后台去遍历处理这些大量的数据是非常繁琐的:比较好的做法是在前台页面中将数据以对象形式保存在json中,然后在后台直接将json转换成我们需要的对象,这样我们的直接可以处理对象了! 添加按钮 复制代码 代码如下: <input name="button" type="button" value="添加" onClick="addRowForPswdBasicFillTe

  • Vue2.0实现将页面中表格数据导出excel的实例

    这两天学习了Vue.js 感觉知识点挺多的,所以,今天添加一点小笔记. 项目中将后台返回的数据v-for到表格中,然后需要将这个表格导出为EXCEL 只说怎么做. 一.需要安装三个依赖: npm install -S file-saver xlsx npm install -D script-loader 二.项目中新建一个文件夹:(vendor---名字任取) 里面放置两个文件Blob.js和 Export2Excel.js. Blob.js和 Export2Excel.js文件下载地址:E

  • vue中mock数据,模拟后台接口实例

    vue中mock数据,模拟后台接口实例

    目录 一.mock文件 二.第三方接口eolinker 在前端开发过程中,有后台配合是很必要的.但是如果自己测试开发,或者后台很忙,没时间,那么我们需要自己提供或修改接口. 下面提供两种方式,第二种更简单,个人推荐第二种. 一.mock文件 1.安装,开发环境 npm i mockjs -D 2.在src目录下新建mock目录,结构如下: 3.index.js内容如下: const Mock = require('mockjs'); //格式: Mock.mock( url, post/get

随机推荐