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 相关文章推荐
ExtJS下grid的一些属性说明
Dec 13 Javascript
仿jQuery的siblings效果的js代码
Aug 09 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
vue使用Axios做ajax请求详解
Jun 07 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
详解Vue 的异常处理机制
Nov 30 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中获取文件扩展名的N种方法小结
2012/02/27 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
php面向对象重点知识分享
2019/09/27 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
Python常见数据结构详解
2014/07/24 Python
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
python 字典(dict)按键和值排序
2016/06/28 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
基于python监控程序是否关闭
2020/01/14 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
新浪网技术部笔试题
2016/08/26 面试题
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
介绍一下linux的文件系统
2015/10/06 面试题
医学专业个人求职自荐信格式
2013/09/23 职场文书
市场营销毕业生自荐信
2013/11/23 职场文书
支教自我鉴定
2014/01/18 职场文书
武夷山导游词
2015/02/03 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
Golang数据类型和相互转换
2022/04/12 Golang