【EasyUI】easyui 设置表头颜色

效果

原理

EasyUI 框架似乎是不提供设置表头颜色的选项的，但观察页面结构可以发现，是可以通过框架自动生成的 id 寻找规律，使用 css id 选择器设置背景样式。

代码示例

CSS

<style>/*tr表示行，td表示列*/{#.datagrid-header-row td{background-color:#36C0DA;color:#fff}#}#datagrid-td-group1-0-0 {background-color:#b0dad9;}#datagrid-td-group1-0-1 {background-color:#fff193;}#datagrid-td-group1-0-2 {background-color:#b0dad9;}#datagrid-td-group1-0-3 {background-color:#fff193;}#datagrid-td-group1-0-4 {background-color:#b0dad9;}#datagrid-td-group1-0-5 {background-color:#fff193;}.icon-filter {background: url('{{ url_for('static', filename='images/filter.png') }}') no-repeat center center;}
</style>

HTML

<table id="dg" title="XXXXXXX-{{ kind }}" height="100%" style="width:100%" data-options="singleSelect:true,remoteSort:false,rownumbers:true,"><thead><tr><th colspan="12" data-options="align:'center',sortable:true"><strong>示例</strong></th><th colspan="12" data-options="align:'center',sortable:true"><strong>示例</strong></th><th colspan="8" data-options="align:'center',sortable:true"><strong>示例</strong></th><th colspan="12" data-options="align:'center',sortable:true"><strong>示例</strong></th><th colspan="4" data-options="align:'center',sortable:true"><strong>示例</strong></th><th colspan="4" data-options="align:'center',sortable:true"><strong>示例</strong></th><th rowspan="2" data-options="field:'upstream_date',align:'center',sortable:true"><strong>更新时间</strong></th></tr><tr><th data-options="field:'demo',align:'center',sortable:true"><strong>示例</strong></th><th data-options="field:'demo',align:'center',sortable:true">对应品种</th><th data-options="field:'demo',align:'center',sortable:true"><strong>示例</strong></th><th data-options="field:'demo',align:'center',sortable:true">对应品种</th><th data-options="field:'demo',align:'center',sortable:true"><strong>示例</strong></th><th data-options="field:'demo',align:'center',sortable:true">对应品种</th><th data-options="field:'demo',align:'center',sortable:true"><strong>示例</strong></th><th data-options="field:'demo',align:'center',sortable:true">对应品种</th><th data-options="field:'demo',align:'center',sortable:true"><strong>示例</strong></th>......</tr></thead></table>

【EasyUI】easyui 设置表头颜色 - 多级表头相关推荐

php导出复杂表头excel,js导出复杂表头（多级表头）的excel
Document 姓名一月二月收入支出收入支出张三10元20元15元25元李四100元200元150元250元导出excel functiontableToExcel(){//要导出的数据 v ...
EasyUI DataGrid 多级表头设置
使用EasyUI做一个报表统计,需要合并表头为多级表头,核心代码如下: $('#dg').datagrid({ url:'datagrid_data.action', fit : true,fitCo ...
easyui 中datagrid的列合并mergeCells，改变表头颜色
官网例子推荐文章核心在onLoadSuccess中添加如下: 一.合并表格 $("#dataGrid").datagrid('mergeCells',{index: 0, // ...
Vue用Export2Excel导出excel,多级表头数据
VUE 使用Export2Excel导出数据,以及多级表头最近公司做项目,需要导出数据到excel表格使用到了 element UI ,Export2Excel 特此记录,毕竟好记性不如烂笔头不 ...
EasyUI多级表头设置
EasyUI是一款比较容易上手的前端框架下面说一下它的多级表头设置: //数据网$("#tt").datagrid({url:"${ctx}/UKeyManage/ge ...
Bootstrap Table踩坑——设置多级表头后只显示第一级表头问题解决办法
今天设置了Bootstrap Table的复杂表头,设置了多级表头(两行列名),但是只能显示第一级表头(第一行的列名),第二级的表头被第一级的表头覆盖.但是我仿照其他网上的其他设置复杂表头例子都能正常 ...
QTableWidget 设置表头颜色
QTableWidget 设置表头颜色方法1: setStyleSheet( "QHeaderView::section {background-color: qlineargradien ...
element ui border表头设置背景颜色
<el-table :data="list" v-loading="listLoading" element-loading-text="给我一 ...
PHP 基于XLSXWriter的多级表头Excel导出
最近公司业务有一些需要导出多级表头的业务需求,百度之后,没有很好的应用demo,然后接触了XLSXWriter,就想着一劳永逸,写个工具类,示例只有三级,但是不止于三级应用举例比如说我们需要这样一 ...

【EasyUI】easyui 设置表头颜色 - 多级表头

效果

原理

代码示例

【EasyUI】easyui 设置表头颜色 - 多级表头相关推荐

最新文章

热门文章