Question

我在jqGrid中有一个footerrow，在那里我总结了一些列中的值。当网格加载完成后，我使用'footerData'功能设置页脚。这需要将grid-options中的“footerrow”属性设置为“true”。我没有总结的一些列中有CSS应用于它们（在单元格中显示一些图标），这是使用colModel API中的“classes”属性设置的。问题是这些CSS类也应用于footerrow中的单元格。我不希望它们在那里应用，但我不知道如何防止它们被显示。在调用'footerData'函数后，我尝试使用jQuery从td元素中删除'class'属性。问题是当网格加载时，图标会闪烁给用户。如何防止首先应用CSS？

Answer 1

关于IE8中的开发者工具或Firefox中的 Firebug ，您可以在创建jqGrid后检查 div 和其他表的结构。主要的 div 与“ ui-jqgrid-view ”类有关。它有以下类的子 div ：

“ ui-jqgrid-titlebar ” - 标题栏
“ ui-jqgrid-hdiv ” - 包含列textes（标题）的标题
“ ui-jqgrid-bdiv ” - 主要信息（正文）
“ ui-jqgrid-sdiv ” - 你需要的东西

如果你的jqGrid有 id =“list”，那么jQuery('#list')[0].parentNode.parentNode.parentNode - 是主网格视图 div （所有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属性：

在CSS中包含一个带有描述符的元素，如“tr.footrow td”，并定义所有你需要的东西
使用我上面描述的jqGrid的解剖结构动态更改类。

我建议您仅在无法使用第一种方式时使用第二种方式，因为您必须找到正确的位置（可能是gridComplete事件）才能进行更改。如果您尝试在错误的位置执行此操作，您的更改将无法正常工作，或者您必须修复某些jqGrid组件的高度或宽度（请参阅Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog）

关心和快乐的编码！

jqGrid页脚单元格从主网格中的单元格“继承”CSS

1 个答案: