jquery - jqGrid 页脚单元格 "inherits"来自主网格中单元格的 CSS

Question

我的 jqGrid 中有一个页脚行，我在其中总结了某些列中的值。当网格完成加载时，我使用“footerData”函数设置页脚。这需要将网格选项中的“footerrow”属性设置为“true”。我没有总结的一些列应用了 CSS(以在单元格中显示一些图标)，这是使用 colModel API 中的“classes”属性设置的。问题是这些 CSS 类也应用于页脚中的单元格。我不希望它们在那里应用，但我不知道如何阻止它们被显示。在调用“footerData”函数后，我尝试使用 jQuery 从 td 元素中删除“class”属性。问题在于，在加载网格时，图标会向用户闪烁。我怎样才能从一开始就阻止 CSS 被应用？

Answer 1

使用 IE8 中的开发者工具或 Firefox 中的Firebug，您可以在创建 jqGrid 后检查 div 和其他表格的结构。主要的 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 - 是主 GridView 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 属性:

1. 在 CSS 中包含一个带有“tr.footrow td”等描述符的元素，并定义您需要的所有内容
2. 使用我上面描述的 jqGrid 结构动态更改类。

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

问候并祝您编码愉快!