我在jqGrid中有一个footerrow,在那里我总结了一些列中的值.当网格加载完成后,我使用’footerData’功能设置页脚.这需要将grid-options中的“footerrow”属性设置为“true”.我没有总结的一些列中有CSS应用于它们(在单元格中显示一些图标),这是使用colModel API中的“classes”属性设置的.问题是这些CSS类也应用于footerrow中的单元格.我不希望它们在那里应用,但我不知道如何防止它们被显示.在调用’footerData’函数后,我尝试使用jQuery从td元素中删除’class’属性.问题是当网格加载时,图标会闪烁给用户.如何防止CSS首先被应用？
解决方法
关于IE8中的Developer Tools或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"> </td>
<td> </td>
<td>bla bla</td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
因此,您可以通过以下方式之一更改页脚的CSS属性：
>在CSS中包含一个带有“tr.footrow td”描述符的元素,并定义所需的所有内容
>使用上面描述的jqGrid的解剖结构动态更改类.
我建议您仅在第二种方式使用时才使用第二种方式,因为您必须找到一个正确的位置(可能是gridComplete事件)来进行更改.如果您尝试在错误的位置执行此操作,您的更改将无法正常工作,或者您必须修复某些jqGrid组件的高度或宽度(请参阅Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog)
问候和快乐的编码！
