浅谈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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
自己的js工具 Cookie 封装
Aug 21 Javascript
javascript开发随笔一 preventDefault的必要
Nov 25 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
json.stringify()与json.parse()的区别以及用处
Jan 25 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调用数据库的存贮过程!
2006/10/09 PHP
PHP完整的日历类(CLASS)
2006/11/27 PHP
在PHP中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
js过滤数组重复元素的方法
2010/09/05 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
详解webpack babel的配置
2018/01/09 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
python实现的阳历转阴历(农历)算法
2014/04/25 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
django 环境变量配置过程详解
2019/08/06 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
python实现批量转换图片为黑白
2020/06/16 Python
python中如何打包用户自定义模块
2020/09/23 Python
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
中软国际Java程序员机试题
2012/08/19 面试题
好矿嫂事迹材料
2014/01/21 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
医学专业大学生求职信
2014/07/12 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏