jqGrid footer cells «наследует» CSS от ячеек в основной сетке

Question

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

Answer 1

С относительно Developer Tools из IE8 или Firebug в Firefox вы можете изучить структуру DIV «ов и других таблиц после создания jqGrid. Есть основные div с классом «ui-jqgrid-view». Он имеет дочерние ДИВ «S со следующими классами:

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

Если jqGrid имеет ID = "список", то jQuery('#list')[0].parentNode.parentNode.parentNode - это основной вид сетки ДИВ (родители всех элементов jqGrid HTML) как 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 тд» и определить все, что вам нужно
2. Изменить класс динамически, используя анатомию jqGrid, которые я описал выше.

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

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