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实现单继承和多继承的简单方法
Mar 29 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
vue动态路由配置及路由传参的方式
May 23 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 Javascript
微信小程序实现购物车小功能
Dec 30 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新手上路(七)
2006/10/09 PHP
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
python实现批量下载新浪博客的方法
2015/06/15 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
python调用接口的4种方式代码实例
2019/11/19 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
Python 中@property的用法详解
2020/01/15 Python
Python requests获取网页常用方法解析
2020/02/20 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
一月红领巾广播稿
2014/02/11 职场文书
python可视化之颜色映射详解
2021/09/15 Python