jqGrid 页脚单元格“继承"来自主网格中的单元格的 CSS [英] jqGrid footer cells "inherits" CSS from cells in the main grid
问题描述
我的 jqGrid 中有一个脚注，用于汇总某些列中的值.当网格完成加载时，我使用footerData"函数设置页脚.这需要将网格选项中的footerrow"属性设置为true".我没有总结的一些列应用了 CSS(在单元格中显示一些图标)，这是使用 colModel API 中的 'classes' 属性设置的.问题是这些 CSS 类也适用于页脚中的单元格.我不希望它们在那里应用，但我不知道如何防止它们被显示.在调用footerData"函数后，我尝试使用 jQuery 从 td 元素中删除class"属性.问题是在加载网格时，图标会闪烁给用户.如何防止 CSS 一开始就被应用?
I have a footerrow in my jqGrid where I sum up the values in some of the columns. I set the footer using the 'footerData' function when the grid has completed loading. This requires the 'footerrow' property in the grid-options to be set to 'true'. Some of the columns which I don't sum up have CSS applied to them (to show some icons in the cells), which is set using the 'classes' property in the colModel API. The problem is that these CSS-classes are also applied to the cells in the footerrow. I don't want them applied there, but I don't know how to prevent them from being shown. I tried to use jQuery to remove the 'class' property from the td elements after calling the 'footerData' function. The problem is that while the grid is loading, the icons are flashed to the user. How can I prevent the CSS from being applied in the first place?
推荐答案
关于 IE8 的 Developer Tools 或 Firefox 的 Firebug，您可以检查 的结构创建 jqGrid 后的 div 和其他表.有主 div 类ui-jqgrid-view".它有以下类的子 div:
With respect of Developer Tools from IE8 or Firebug in Firefox you can examine structure of div's and other tables after creating a jqGrid. There are main div with the class "ui-jqgrid-view". It have child div's with following classes:
- "ui-jqgrid-titlebar" - 标题栏
- "ui-jqgrid-hdiv" - 带有列文本的标题(标题)
- "ui-jqgrid-bdiv" - 带有主要信息(正文)
- "ui-jqgrid-sdiv" - 你所需要的
- "ui-jqgrid-titlebar" - title bar
- "ui-jqgrid-hdiv" - headers with column textes (header)
- "ui-jqgrid-bdiv" - with the main information (body)
- "ui-jqgrid-sdiv" - its what you needs
如果你的 jqGrid 有 id="list"，那么 jQuery('#list')[0].parentNode.parentNode.parentNode - 是主网格视图div(所有 jqGrid HTML 元素的父级)作为 DOM 元素:
If your jqGrid has id="list", then jQuery('#list')[0].parentNode.parentNode.parentNode - is the main grid view div (parents of all jqGrid HTML elements) as a DOM element:
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 属性:
So you change CSS properties of the footer with respect of one of the ways:
- 在您的 CSS 中包含一个带有类似tr.footrow td"的描述符的元素并定义您需要的所有内容
- 使用我上面描述的 jqGrid 的解剖结构动态更改类.
我建议您仅在无法使用第一种方式时才使用第二种方式，因为您必须找到正确的位置(可能是 gridComplete 事件)才能进行更改.如果您尝试在错误的位置执行此操作，则您的更改将无法正常工作，或者您必须修复某些 jqGrid 组件的高度或宽度(请参阅 在 jQueryUI 对话框内的 jqGrid 上正确调用 setGridWidth)
I recommend you to use the second way only if you unable to use the first one, because you have to find a correct place (probably gridComplete event) to make the changes. If you will try do this on the wrong place, either your changes will not working or you'll have to fix height or width of some jqGrid components (see Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog)
问候和愉快的编码！
这篇关于jqGrid 页脚单元格“继承"来自主网格中的单元格的 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
