需求描述

今天，接到一个项目需求，要求动态的将easyui中的datagrid中的表头样式进行修改。
- 例如：将表头中的字体增大、将某个表头的字体加粗…

问题分析

通过查询网上资料，发现easyui并没有给出表头样式的动态设置，（可能自己的查询方式有误，希望有缘人能够查询出来的话，能够评论告知一下，万分感谢！）于是，只能通过easyui构建html代码的class属性，通过class属性找到对应元素，进行动态设置。
但是在实现过程中，发现easyui的部分class属性内有空格，使得通过class属性获取dom元素无法精准获取，于是，只能通过查找该dom元素的上层dom元素，然后通过遍历查询找到该dom元素进行样式的修改。

问题解决

let headerText = ''; // 要修改的表头文本
let style = '';  // 要改成什么样式
$(".datagrid-header-row td div span").each(function(i,th){var val = $(th).text();if(val === headerText){$(th).html("<label style="+style+">"+val+"</label>");}
});

easyui datagrid表头样式设置相关推荐

easyui datagrid 表头固定（垂直滚动条）、列固定（水平滚动条）
easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...
easyui datagrid表头 toolbar 固定
当用到EasyUI中的 datagrid 时,设置 fit:true, 就会使表头跟toolbar固定,但是这个容器要设置固定的宽和高.
easyui datagrid 表头与数据错位
方法一:容易,实用的方法在jquery.easyui.min.js中查找到field.replace(/[\.|\s]/g, "-")在其后添加replace 例子:field. ...
easyui datagrid 表头 sort 排序
datagrid的点击列表头刷新,分为两种,一种是页面刷新,不涉及后台服务器数据,不会从新查询数据库,只会刷新当前页数据: 一种是服务器级刷新,会重新加载全部数据. 如果不需要自定义排序,可以直接使用 ...
Springboot+POI通用Excel表格导出表头样式设置方法
private void setSheetHeader(XSSFWorkbook xWorkbook, Sheet sh,String[] title) { // 设置单元格格式为文本格式XSSFDa ...
去掉easyui datagrid内部虚线的方式。
去掉easyui datagrid内部虚线的方式.easyui datagrid的样式是统一写在样式文件中的,如果想要统一替换可以找对应的datagird样式文件中的以下部分.如果想要改 ...
easyUI dataGrid 隐藏分页工具栏隐藏表头
一.方法1(不推荐) 适应以下需求: 1.当表格没有数据时,把datagrid隐藏;有数据的时候显示 2.表格不分页,无需显示分页栏 3.datagrid的高度由内容撑开(固定高度,无数据时显示空白也 ...
easyui 表头合并_JQuery EasyUI DataGrid动态合并（标题）单元）一
JS: /** * EasyUI DataGrid根据字段动态合并单元格 * @param fldList 要合并table的id * @param fldList 要合并的列,用逗号分隔(例如:&q ...
theadClasses设置Bootstrap Table表头样式
通过theadClasses属性设置表头样式. thead-light设置灰色背景 //bootstrap table初始化数据 itxst.com $('#table').bootstrapTabl ...

easyui datagrid表头样式设置

文章目录

需求描述

问题分析

问题解决

easyui datagrid表头样式设置相关推荐

最新文章

热门文章