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 相关文章推荐
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
JS无限级导航菜单实现方法
Jan 05 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
详解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代码(抓取网页中的邮箱地址)
2012/07/17 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
js验证表单大全
2006/11/25 Javascript
setAttribute 与 class冲突解决
2008/02/17 Javascript
JavaScript全局函数使用简单说明
2011/03/11 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
axios实现简单文件上传功能
2019/09/25 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
Python机器学习之决策树算法
2017/12/22 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
python实现简单俄罗斯方块
2020/03/13 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
英智兴达软件测试笔试题
2016/10/12 面试题
Java中的基本数据类型所占存储空间大小固定的吗
2012/02/15 面试题
高三毕业生自我鉴定
2013/12/20 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
社区健康教育工作方案
2014/06/03 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
检讨书格式
2015/01/23 职场文书
毕业酒会致辞
2015/07/29 职场文书
Python实现拼音转换
2021/06/07 Python
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript