jqGrid:有条件地隐藏/显示列内容**每行** [英] jqGrid: conditionally hide / show column content **per row**

问题描述

是否有任何方法仅将jqGrid(在我的情况下为Struts2-jQuery-Grid Plugin 3.7.0)中的某些行作为目标?

Is there any way to target a column in a jqGrid (in my case, Struts2-jQuery-Grid Plugin 3.7.0) on certain rows only ?

例如，仅当第一列值为 Movie 时，我才想显示第二列的内容:

For example, I want to show the content of the 2nd column only if the 1th column value is Movie:

 _______________________________________________________
|       COL 1       |               COL 2               |
|===================|===================================|
|   Movie           | bla bla yada yada                 |
|-------------------|-----------------------------------|
|   Song            |                                   |
|-------------------|-----------------------------------|
|   Clip            |                                   |
|-------------------|-----------------------------------|
|   Movie           | foo or bar that is the question...|
|-------------------|-----------------------------------|
|   Game            |                                   |
|___________________|___________________________________|

我尝试在

I've tried to use conditional OGNL expressions in hidden and cssClass fields of the GridColumnTag, but immediately noticed they evaluate once against the whole column, not at every "iteration".

作为一种解决方法，我可以在填充网格后使用javascript手动隐藏该行中的列，但这是一个hack，我想知道是否有一种干净的解决方案来有条件地对列进行处理"每行.

As a workaround, I can manually hide the columns in that rows with javascript after the grid is populated, but that is a hack, and I'm wondering if there is a clean solution to conditionally "do something" on a columns per-row.

注意:我不能简单地从源List中删除内容(很明显)，因为在我的实际情况下，COL 2是Boolean，表示为checkbox.

NOTE: I can't simply erase the content from the source List (as it would be obvious) because COL 2 in my real case is a Boolean, represented as checkbox.

推荐答案

有很多方法可以实现需求.最简单的方法之一是在需要隐藏的单元格上设置color: transparent; CSS.例如，您定义CSS规则

There are many ways how you can implement the requirement. One of the most easy is the setting of color: transparent; CSS on the cells which you need to hide. For example you define the CSS rule

.hiddenCell { color: transparent; }

，然后将类别hiddenCell分配给"COL 2"的指定单元格.您可以为其使用"COL 2"的cellattr属性:

and you assign the class hiddenCell to specified cells of the "COL 2". You can use cellattr property of "COL 2" for it:

cellattr: function (rowId, val, item) {
    if (item.sent) {
        return " class='hiddenCell'";
    }
}

演示演示了该方法.该方法的缺点-隐藏的文本仍然存在于HTML页面上，因此可以根据需要进行检查.

The demo demonstrates the approach. Disadvantage of the approach - the hidden text still exist on HTML page and so one can examine it if required.

另一种方法是使用自定义格式化程序.例如，您可以定义以下formatter回调

Another way is the usage of custom formatters. For example you can define the following formatter callback

formatter: function (cellValue, options, item) {
    return item.sent ? "" : $.jgrid.htmlEncode(cellValue);
}

该演示演示了第二种方法.该方法的缺点-将自定义格式化程序的使用与另一个格式化程序(例如上例中的formatter: "select")结合起来有点困难.不过，也可以做到这一点:

The demo demonstrates the second approach. Disadvantage of the approach - it's a little difficult to combine usage of custom formatter with another formatter (like formatter: "select" in the example above). Nevertheless one can do it too:

formatter: function (cellValue, options, item, action) {
    return item.sent ?
        "" :
        $.fn.fmatter.call(
            this,
            "select",
            cellValue,
            options,
            item,
            action);
}

like 下一个演示.

如果您从服务器加载数据，那么最好的选择可能是回调中的修改输入数据("COL 2"列的输入数据).请参见答案或这一个以获得代码示例.

If you loads the data from the server then probably the best choice would be to modify the input data (the input data for the column "COL 2") inside of beforeProcessing callback. See the answer or this one for code examples.

这篇关于jqGrid:有条件地隐藏/显示列内容**每行**的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！