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 相关文章推荐
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
php处理复杂xml数据示例
2016/07/11 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
javascript与webservice的通信实现代码
2010/12/25 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
JS判定是否原生方法
2013/07/22 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
用python读写excel的方法
2014/11/18 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
python读取文件名称生成list的方法
2018/04/27 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
学生打架检讨书1000字
2014/01/16 职场文书
水果连锁超市创业计划书
2014/01/24 职场文书
护士自我评价
2014/02/01 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
2016年母亲节寄语
2015/12/04 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS