Ячейки нижнего колонтитула jqGrid «наследуют» CSS от ячеек в основной сетке

Question

У меня есть нижний колонтитул в моей jqGrid, где я суммирую значения в некоторых столбцах. Я установил нижний колонтитул, используя функцию «footerData» после завершения загрузки сетки. Это требует, чтобы свойство 'footerrow' в параметрах сетки было установлено в значение 'true'. К некоторым столбцам, которые я не суммирую, к ним применен CSS (для отображения некоторых значков в ячейках), который устанавливается с помощью свойства 'classes' в API colModel. Проблема в том, что эти CSS-классы также применяются к ячейкам нижнего колонтитула. Я не хочу, чтобы они применялись там, но я не знаю, как предотвратить их показ. Я попытался использовать jQuery для удаления свойства 'class' из элементов td после вызова функции 'footerData'. Проблема в том, что во время загрузки сетки значки мигают пользователю. Как я могу предотвратить применение CSS в первую очередь?

Answer 1

Что касается Developer Tools из IE8 или Firebug в Firefox, вы можете проверить структуру div и других таблиц после создания jqGrid. Есть основные div с классом " ui-jqgrid-view ". У него есть дети div со следующими классами:

• " ui-jqgrid-titlebar " - строка заголовка
• " ui-jqgrid-hdiv " - заголовки с текстами столбцов (заголовок)
• " ui-jqgrid-bdiv " - с основной информацией (тело)
• " ui-jqgrid-sdiv " - это то, что вам нужно

Если ваш jqGrid имеет id = "list" , тогда jQuery('#list')[0].parentNode.parentNode.parentNode - это основной вид сетки div (родительские элементы всех элементов HTML jqGrid) в качестве элемента DOM:

var gviewNode = jQuery('#list')[0].parentNode.parentNode.parentNode;
var hdiv = jQuery(".ui-jqgrid-hdiv", gviewNode);
var bdiv = jQuery(".ui-jqgrid-bdiv", gviewNode);
var sdiv = jQuery(".ui-jqgrid-sdiv", gviewNode);

позже структура sdiv выглядит следующим образом:

<div class="ui-jqgrid-sdiv">
    <div class="ui-jqgrid-hbox">
        <table class="ui-jqgrid-ftable" >
            <tbody>
                <tr class="ui-widget-content footrow footrow-ltr">
                    <td class="ui-state-default jqgrid-rownum">&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>bla bla</td>
                    <td>&nbsp;</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Таким образом, вы изменяете свойства CSS нижнего колонтитула одним из способов:

1. Включите в свой CSS элемент с дескриптором типа «tr.footrow td» и определите все, что вам нужно
2. Измените класс динамически, используя анатомию jqGrid, которую я описал выше.

Я рекомендую использовать второй способ, только если вы не можете использовать первый , потому что вам нужно найти правильное место (возможно, событие gridComplete), чтобы внести изменения. Если вы попытаетесь сделать это не в том месте, ваши изменения не будут работать или вам придется фиксировать высоту или ширину некоторых компонентов jqGrid (см. Правильный вызов setGridWidth для jqGrid в диалоге jQueryUI )

С уважением и счастливого кодирования!