Блог

Предположим, у меня есть следующий макет сводной таблицы ZK.

Макет сводной таблицы ZK

Ниже приведено содержимое моего файла .zul :

 <?page title="Kissa : Sample Pivottable" ?>
<zk xmlns:h="native">
    <style src="/resources/css/mycss.css"/>
    <window apply="com.sample.view.zk.controller.KissaController" hflex="max">
        <pivottable id="pivot" hflex="max" grandTotalForColumns="false" grandTotalForRows="false" >
            <div style="color: red">My Data Title</div>
            <div style="color: blue">My Column Title</div>
            <div style="color: green">My Row Title</div>
        </pivottable>
    </window>
</zk>
  

Теперь я хочу добавить цвет только в первые два столбца заголовков строк.
Как я могу это сделать?
Есть ли способ, которым я могу отобразить класс CSS так же, как renderCellStyle() в классе SimplePivotRenderer?

Я хотел бы также сказать, что я пока не имею ни малейшего представления о том, как файл .zul преобразуется в HTML / CSS / Javascript. ZK просто автоматически генерирует эти файлы.

И вот сгенерированная часть сводной таблицы :

 <div id="nFyP0-cave" class="z-window-content"><div style="" id="nFyP1" class="z-pivottable"><div class="z-pivottable-wrapper"><table id="nFyP1-body" class="z-pivottable-body" cellpadding="0" cellspacing="0"><tbody><tr style="height: 0px;"><th style="width: 100px;"></th><th style="width: 100px;"></th><th style="width: 100px;"></th><th style="width: 100px;"></th><th style="width: 100px;"></th><th id="nFyP1-colTitleFaker" style="width: 1402px;"></th></tr><tr style="height:20px"><th id="nFyP1-dataTitle" colspan="5" style="width:500px;height:20px" class="z-pivottable-first-col z-pivottable-data-title"><div class="z-pivottable-field-wrapper"><div id="nFyP2" style="color: red;" class="z-div"><span id="nFyP3" class="z-label">My Data Title</span></div></div></th><th id="nFyP1-colTitle" style="width: 1402px; height: 20px;" class="z-pivottable-col-title"><div class="z-pivottable-field-wrapper"><div id="nFyP4" style="color: blue;" class="z-div"><span id="nFyP5" class="z-label">My Column Title</span></div></div></th></tr><tr style="height: 19px;"><th id="nFyP1-rowTitle" rowspan="1" colspan="5" style="width:500px" class="z-pivottable-first-col z-pivottable-row-title"><div class="z-pivottable-field-wrapper"><div id="nFyP6" style="color: green;" class="z-div"><span id="nFyP7" class="z-label">My Row Title</span></div></div></th><td style="" rowspan="7"><div style="width: 1402px;" id="nFyP1-inner" class="z-pivottable-inner"><div style="width: 100px;" id="nFyP1-cnt" class="z-pivottable-cnt"><table id="nFyP1-cell" class="z-pivottable-cell-body  " style="width: 100%;" cellpadding="0" cellspacing="0"><tbody style="visibility:hidden; height:0px"><tr id="nFyP1-inner-faker" class="z-pivottable-inner-faker"><th width="100px"></th><th id="z-pivottable-inner-fakerflex"></th></tr></tbody><tbody><tr style="height: 19px;"><th class="z-pivottable-col-field"><div class="z-pivottable-field-wrapper">残数</div></th></tr><tr style="height: 22px;"><td style="color: pink; font-weight: bold" class="z-pivottable-cell-field"><div class="z-pivottable-field-wrapper">25.60</div></td></tr><tr style="height: 22px;"><td style="color: pink; font-weight: bold" class="z-pivottable-cell-field"><div class="z-pivottable-field-wrapper">425.50</div></td></tr><tr style="height: 22px;"><td style="color: pink; font-weight: bold" class="z-pivottable-cell-field"><div class="z-pivottable-field-wrapper">50.80</div></td></tr><tr style="height: 21px;"><td style="color: pink; font-weight: bold" class="z-pivottable-cell-field"><div class="z-pivottable-field-wrapper">54.70</div></td></tr><tr style="height: 21px;"><td style="color: pink; font-weight: bold" class="z-pivottable-cell-field"><div class="z-pivottable-field-wrapper">25.60</div></td></tr><tr style="height: 21px;"><td style="color: pink; font-weight: bold" class="z-pivottable-cell-field"><div class="z-pivottable-field-wrapper">652.40</div></td></tr></tbody></table></div></div></td></tr><tr style="height: 22px;"><th rowspan="6" style="width:100px" class="z-pivottable-first-col z-pivottable-row-field"><div class="z-pivottable-field-wrapper z-pivottable-merged-field"><div class="z-pivottable-icon z-pivottable-icon-expd"></div>拠点案</div></th><th rowspan="6" style="width:100px" class="z-pivottable-row-field"><div class="z-pivottable-field-wrapper z-pivottable-merged-field"><div class="z-pivottable-icon z-pivottable-icon-expd"></div>販売</div></th><th rowspan="6" style="width:100px" class="z-pivottable-row-field"><div class="z-pivottable-field-wrapper z-pivottable-merged-field"><div class="z-pivottable-icon z-pivottable-icon-expd"></div>販売量</div></th><th rowspan="2" style="width:100px" class="z-pivottable-row-field"><div class="z-pivottable-field-wrapper z-pivottable-merged-field"><div class="z-pivottable-icon z-pivottable-icon-expd"></div>お客様FO</div></th><th style="width:100px" class="z-pivottable-row-field"><div class="z-pivottable-field-wrapper">AAAA</div></th></tr><tr style="height: 22px;"><th style="width:100px" class="z-pivottable-row-field"><div class="z-pivottable-field-wrapper">BBBB</div></th></tr><tr style="height: 22px;"><th rowspan="2" style="width:100px" class="z-pivottable-row-field"><div class="z-pivottable-field-wrapper z-pivottable-merged-field"><div class="z-pivottable-icon z-pivottable-icon-expd"></div>お客様PO</div></th><th style="width:100px" class="z-pivottable-row-field"><div class="z-pivottable-field-wrapper">AAAA</div></th></tr><tr style="height: 21px;"><th style="width:100px" class="z-pivottable-row-field"><div class="z-pivottable-field-wrapper">BBBB</div></th></tr><tr style="height: 21px;"><th rowspan="2" style="width:100px" class="z-pivottable-row-field"><div class="z-pivottable-field-wrapper z-pivottable-merged-field"><div class="z-pivottable-icon z-pivottable-icon-expd"></div>お客様引合</div></th><th style="width:100px" class="z-pivottable-row-field"><div class="z-pivottable-field-wrapper">AAAA</div></th></tr><tr style="height: 21px;"><th style="width:100px" class="z-pivottable-row-field"><div class="z-pivottable-field-wrapper">BBBB</div></th></tr><tr style="display: none;" height="30px"><td colspan="6" class="z-pivottable-scroll"><div name="_z_6" id="_z_6" style="display:none;" class="z-paging"><ul><li><a disabled="disabled" name="_z_6-first" class="z-paging-button z-paging-first"><i class="z-paging-icon z-icon-angle-double-left"></i></a></li><li><a disabled="disabled" name="_z_6-prev" class="z-paging-button z-paging-previous"><i class="z-paging-icon z-icon-angle-left"></i></a></li><li><input name="_z_6-real" class="z-paging-input" value="1" size="3" type="text"><span class="z-paging-text"> / 1</span></li><li><a disabled="disabled" name="_z_6-next" class="z-paging-button z-paging-next"><i class="z-paging-icon z-icon-angle-right"></i></a></li><li><a disabled="disabled" name="_z_6-last" class="z-paging-button z-paging-last"><i class="z-paging-icon z-icon-angle-double-right"></i></a></li></ul></div><div style="display: none;" id="nFyP1-scroll" class="z-pivottable-scroll"><div></div></div></td></tr></tbody></table></div><div style="left: 100px; top: 44px; height: 129px; display: none;" id="nFyP1-rsr" class="z-pivottable-resizer"><div class="z-pivottable-resizer-handle"></div></div></div></div>
  

Пожалуйста, помогите.
Спасибо.