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

Question

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

Answer 1

对于来自 IE8 的Developer Tools 或 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)

问候和愉快的编码!