浅谈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 相关文章推荐
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 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
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
PHP读取目录下所有文件的代码
2008/01/07 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Django发送html邮件的方法
2015/05/26 Python
Python字符串处理实现单词反转
2017/06/14 Python
Python实现多线程的两种方式分析
2018/08/29 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
python 多线程中join()的作用
2020/10/29 Python
大学生表扬信范文
2014/01/09 职场文书
工作失误检讨书范文大全
2014/01/13 职场文书
给学校的建议书范文
2014/05/15 职场文书
呐喊读书笔记
2015/06/30 职场文书
Java中try catch处理异常示例
2021/12/06 Java/Android
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers