浅谈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类的静态属性和实例属性的理解
Oct 01 Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
vue组件实例解析
Jan 10 Javascript
vue中nextTick用法实例
Sep 11 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
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
什么是MVC,好东西啊
2007/05/03 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
React快速入门教程
2017/01/17 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
JS实现放大镜效果
2020/09/21 Javascript
python 默认参数相关知识详解
2019/09/18 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
成人毕业生自我鉴定
2013/10/18 职场文书
消防安全汇报材料
2014/02/08 职场文书
承诺书模板
2014/08/30 职场文书
就业导师推荐信范文
2015/03/27 职场文书
党员学习型组织心得体会
2019/06/21 职场文书