layui中table表头样式修改方法


Posted in Javascript onAugust 15, 2018

如下所示:

layui.use('table', function () {
 var table = layui.table;
 
 table.render({
  elem: '#desTable'
  , url: '${ctx}/alarm/queryEventShowScatter'
  , even: true
  , page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
  layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
  //,curr: 5 //设定初始在第 5 页
  , groups: 1 //只显示 1 个连续页码
  , first: false //不显示首页
  , last: false //不显示尾页
 
  }
  , cols: [[
  {field: 'id', width: '15%', title: '1', style: 'background-color: #5FB878; color: #fff'}
  , {field: 'srcip', width: '15%', title: '2', style: 'background-color: #5FB878; color: #fff'}
  , {field: 'logtime', width: '20%', title: '3', style: 'background-color: #5FB878; color: #fff'}
  , {field: 'lasttime', width: '20%', title: '4', style: 'background-color: #5FB878; color: #fff'}
  , {field: 'count', width: '15%', title: '5', style: 'background-color: #5FB878; color: #fff'}
  , {field: 'percent', width: '15%', title: '6', style: 'background-color: #5FB878; color: #fff'}
  ]],
  done: function (res, curr, count) {
  $('tr').css({'background-color': '#009688', 'color': '#fff'});
  }
 
 });
 });

done:function()方法在加载完成时回调,用jquery修改样式。

以上这篇layui中table表头样式修改方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
Javascript中的相等与不等运算
Apr 25 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
详解redux异步操作实践
Aug 15 #Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 #Javascript
Bootstrap Table列宽拖动的方法
Aug 15 #Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
Aug 15 #Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 #Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 #Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 #Javascript
You might like
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
浅谈Django的缓存机制
2018/08/23 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
自学python的建议和周期预算
2019/01/30 Python
Python二维码生成识别实例详解
2019/07/16 Python
python将时分秒转换成秒的实例
2019/12/07 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
自考生毕业自我鉴定
2013/10/10 职场文书
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
库房管理员岗位职责
2014/03/09 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
学习雷锋活动总结
2014/04/29 职场文书
男方婚前保证书
2015/02/28 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server