效果

原理

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 设置表头颜色 - 多级表头的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。