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 相关文章推荐
js实现的常用的左侧导航效果
Oct 17 Javascript
js实现拖拽效果
Feb 12 Javascript
jQuery的position()方法详解
Jul 19 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
详解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 破解防盗链图片函数
2008/12/09 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
PHP创建XML接口示例
2019/07/04 PHP
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
sails框架的学习指南
2014/12/22 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
Python读大数据txt
2016/03/28 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
网络安全方面的面试题
2016/01/07 面试题
我爱家乡演讲稿
2014/09/12 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
工作能力自我评价2015
2015/03/05 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
mysql分表之后如何平滑上线详解
2021/11/01 MySQL
Python 键盘事件详解
2021/11/11 Python