【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>