浅谈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 拖拉缩放效果
Dec 10 Javascript
为调试JavaScript添加输出窗口的代码
Feb 07 Javascript
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
js+xml生成级联下拉框代码
Jul 24 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 Javascript
js+audio实现音乐播放器
Sep 13 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.ini中文版
2006/10/09 PHP
MYSQL环境变量设置方法
2007/01/15 PHP
关于PHP模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
2010/10/15 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
js实现在网页上简单显示时间的方法
2015/03/02 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
Python面向对象编程基础解析(一)
2017/10/26 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
python实现简单井字棋小游戏
2020/03/05 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
如何理解transaction事务的概念
2015/05/27 面试题
法警的竞聘演讲稿
2014/01/02 职场文书
公司合作意向书范文
2014/07/30 职场文书
自查自纠整改报告
2014/11/06 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android
python使用shell脚本创建kafka连接器
2022/04/29 Python