浅谈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 08 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 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
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
dojo 之基础篇
2007/03/24 Javascript
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
python使用Berkeley DB数据库实例
2014/09/26 Python
python动态性强类型用法实例
2015/05/09 Python
python+opencv实现动态物体追踪
2018/01/09 Python
详解python之协程gevent模块
2018/06/14 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
python占位符输入方式实例
2019/05/27 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
python下载库的步骤方法
2019/10/12 Python
如何在django中添加日志功能
2020/02/06 Python
如何基于Python实现数字类型转换
2020/02/07 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
工程造价专业大专生求职信
2013/10/06 职场文书
读书心得体会
2013/12/28 职场文书
工商干部先进事迹
2014/05/14 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
技术入股合作协议书
2016/03/21 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python