浅谈layui数据表格判断问题(加入表单元素),设置单元格样式


Posted in Javascript onOctober 26, 2019

如下所示:

浅谈layui数据表格判断问题(加入表单元素),设置单元格样式

<script type="text/html" id="status">
       {{# if(d.status === 1){ }}
         <span class="layui-badge layui-bg-green">正常</span>
       {{# } else { }}
        <span class="layui-badge">禁用</span>
       {{# } }}
    </script>

 layui.use(['layer', 'form','table'], function(){
       layer = layui.layer;
       var table = layui.table;       
       //第一个实例
       table.render({
        elem: '#demo'
        ,url: get_menu //数据接口
        ,headers: {Authorization: token} 
        ,page: false //开启分页
        ,cols: [[ //表头
         {type:'checkbox'}
         ,{field: 'userId', title: 'ID', width:80, sort: true}
         ,{field: 'username', title: '用户名', width:150}
         ,{field: 'email', title: '邮箱', width:250}
         ,{field: 'mobile', title: '手机号', width:200}
         ,{field: 'status', title: '状态', width:150, templet: '#status'}
         ,{field: 'createTime', title: '创建时间', width:300} 
         ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
        ]]
        ,parseData: function(res){
          return {
            "code": res.code, //解析接口状态
            "msg": res.msg, //解析提示文本
            "data": res.data //解析数据列表
          }
        }
       });
      });

如果是多个条件的话:

<script type="text/html" id="status">
  {{# if(d.status === 0 ){ }}
   <button type="button" class="layui-btn">待审批</button>
   {{# } }} 
   {{# if(d.status === 1 ){ }}
   <button type="button" class="layui-btn layui-btn-normal">审批通过</button>
   {{# } }} 
   {{# if(d.status === 2 ){ }}
   <button type="button" class="layui-btn layui-btn-danger">未通过</button> 
   {{# } }} 
</script>

以上这篇浅谈layui数据表格判断问题(加入表单元素),设置单元格样式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript知识点收藏
Feb 22 Javascript
jQuery 插件 将this下的div轮番显示
Apr 09 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
js实现随机8位验证码
Jul 24 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 #Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 #Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 #jQuery
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 #Javascript
Layui数据表格之单元格编辑方式
Oct 26 #Javascript
layui表格设计以及数据初始化详解
Oct 26 #Javascript
LayUi数据表格自定义赋值方式
Oct 26 #Javascript
You might like
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
JavaScript 原型继承
2011/12/26 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
python破解zip加密文件的方法
2018/05/31 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
材料成型专业个人求职信范文
2013/09/25 职场文书
后勤岗位职责
2013/11/26 职场文书
建议书标准格式
2014/03/12 职场文书
车间安全生产标语
2014/06/06 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL
Golang获取List列表元素的四种方式
2022/04/20 Golang