浅谈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 相关文章推荐
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
js尾调用优化的实现
May 23 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 Javascript
vue界面发送表情的实现代码
Sep 11 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下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
Python文档生成工具pydoc使用介绍
2015/06/02 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
python安装scipy的方法步骤
2019/06/26 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
Python3常见函数range()用法详解
2019/12/30 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
python中append函数用法讲解
2020/12/11 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
飞利浦美国官网:Philips美国
2020/02/28 全球购物
学生的自我鉴定范文
2013/10/24 职场文书
总经理司机岗位职责
2014/02/06 职场文书
父母对孩子说的话
2014/04/12 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
户外宣传策划方案
2014/05/25 职场文书
开学随笔
2015/08/15 职场文书
python中print格式化输出的问题
2021/04/16 Python
golang定时器
2022/04/14 Golang