jqGrid footer cells“inherits”来自主网格中的单元格的CSS [英] jqGrid footer cells "inherits" CSS from cells in the main grid

问题描述

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

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或 Firebug 在Firefox中，您可以在创建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" - 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元素的父代） / p>

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">&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>bla bla</td>
                    <td>&nbsp;</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

因此，您可以通过以下方式之一更改页脚的CSS属性：

So you change CSS properties of the footer with respect of one of the ways:

1. 在您的CSS中包含描述符如tr.footrow td的元素，并定义所有您需要的


2. 更改

我建议您仅在无法使用第二种方式时才使用第二种方法使用第一个，因为你必须找到一个正确的地方（可能是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 footer cells“inherits”来自主网格中的单元格的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！