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基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
用js实现in_array的方法
Nov 05 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 Javascript
原生js中运算符及流程控制示例详解
Jan 05 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程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
codeigniter框架批量插入数据
2014/01/09 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
JQuery中层次选择器用法实例详解
2015/05/18 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
go和python调用其它程序并得到程序输出
2014/02/10 Python
python实现斐波那契递归函数的方法
2014/09/08 Python
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
十佳大学生事迹材料
2014/01/29 职场文书
数学教育专业求职信
2014/07/22 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
决心书格式范文
2015/09/23 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS