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

Question

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

Answer 1

Что касается инструментов разработчика из 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 - это основной вид сетки (родители всех элементов 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)

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