浅谈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实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
JS操作iframe里的dom(实例讲解)
Jan 29 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
js无法获取到html标签的属性的解决方法
Jul 26 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 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实现mysql数据库备份类
2008/03/20 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
Smarty3配置及入门语法
2017/02/22 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
python变量命名的7条建议
2019/07/04 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
python判断正负数方式
2020/06/03 Python
中职应届生会计求职信
2013/10/23 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
如何写好自荐信
2014/04/07 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
新入职员工工作总结
2015/10/15 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书