jqGrid:有条件地隐藏/显示列内容**每一行**

Question

是否有任何方法可以将jqGrid中的列(在我的例子中是Struts2-jQuery-Grid插件3.7.0)仅针对某些行？

例如，仅当第1列值为Movie时，我才希望显示第2列的内容。

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

我尝试在hidden和GridColumnTag的cssClass字段中使用条件OGNL表达式，但立即注意到它们只针对整个列计算一次，而不是每次“迭代”。

作为一种解决方法，在填充网格之后，我可以使用javascript手动隐藏该行中的列，但这是一种黑客，我想知道是否有一个干净的解决方案，可以有条件地对每一行的列“做一些事情”。

注意:我不能简单地从源List中删除内容(这是显而易见的)，因为在我的实际示例中，COL 2是一个Boolean，表示为checkbox。

Answer 1

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

.hiddenCell { color: transparent; }

并将类hiddenCell分配给"COL 2“的指定单元格。您可以对其使用"COL 2“的cellattr属性：

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

演示演示了该方法。这种方法的缺点-隐藏的文本仍然存在于HTML页面上，所以如果需要的话可以检查它。

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

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

演示演示了第二种方法。这种方法的缺点--将自定义格式化程序的使用与另一个格式化程序结合起来有点困难(如上面示例中的formatter: "select" )。然而，我们也可以这样做：

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

就像下一个演示。

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

Answer 2

对于记录，问题中描述的(假)场景(使用Struts2-jQuery-Grid插件而不是原始jqGrid)的解决方案是：

<script>
   function conditionalFormatter(cellValue, options, rowObject) {
       return rowObject.type!="Movie" ? "&nbsp;" : $.jgrid.htmlEncode(cellValue);
   }
</script>

<s:url id="remoteurl" action="myStrutsAction" namespace="/myNamespace" />

<sjg:grid href="%{remoteurl}" dataType="json"  gridModel="gridModel" >
    <sjg:gridColumn title="Col 1" name="type" />
    <sjg:gridColumn title="Col 2" name="foo" formatter="conditionalFormatter" />
</sjg:grid>