浅谈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的25个步骤 千倍级效率提升
Feb 11 Javascript
JavaScript prototype对象的属性说明
Mar 13 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
js onclick事件传参讲解
Nov 06 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 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
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
理解javascript async的用法
2017/08/22 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
对numpy中的where方法嵌套使用详解
2018/10/31 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
python制作简单五子棋游戏
2019/06/18 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
Linux上比较文件的命令都有哪些
2012/02/24 面试题
法学毕业生自荐信
2013/11/13 职场文书
淘宝客服自我总结鉴定
2014/01/25 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
企业授权委托书范本
2014/04/02 职场文书
反对邪教标语
2014/06/30 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
立案决定书范文
2015/06/24 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js