如何仅在某些行上显示jqGrid子网格？ [英] How to show jqGrid subgrid on certain rows only?

问题描述

我使用

我是尝试修改它的方式只显示子网格是否有要显示的数据。换句话说，如果计数> 0 。从逻辑上讲，我尝试添加条件（下面的伪代码，基于之前提到的答案）：

原始代码

  var gridParams = {
 datatype：'local'，
 data：myGridData，
 colNames：[ '第1列'，'第2列']，
 colModel：[
 {名称：'col1'，宽度：200}，
 {名称：'col2'，宽度：200} 
]，
 ... 
 subGrid：true，
 subGridRowExpanded：function（subgridDivId，rowId）{
 var subgridTableId = subgridDivId +_ t; 
 $（＃+ subgridDivId）.html（< table id ='+ subgridTableId +'>< / table>）; 
 $（＃+ subgridTableId）.jqGrid（{
 datatype：'local'，
 data：mySubgrids [rowId]，
 colNames：['Col 1'，' Col 2'，'Col 3']，
 colModel：[
 {name：'c1'，width：100}，
 {name：'c2'，width：100}，
 {名称：'c3'，宽度：100} 
]，
 ... 
}）; 
} 
} 
 
 $（＃grid）。jqGrid（gridParams）; 
  

调整后代码

  var gridParams = {
 datatype：'local'，
 data：myGridData，
 colNames：['Column 1'， '第2列'，
 colModel：[
 {名称：'col1'，宽度：200}，
 {名称：'col2'，宽度：200} 
]， 
 ... 
} 
 
 //条件添加HERE 
 if（count> 0）
 {
 gridParams.subGrid = true ; 
 gridParams.subGridRowExpanded = function（subgridDivId，rowId）{
 var subgridTableId = subgridDivId +_ t; 
 $（＃+ subgridDivId）.html（< table id ='+ subgridTableId +'>< / table>）; 
 $（＃+ subgridTableId）.jqGrid（{
 datatype：'local'，
 data：mySubgrids [rowId]，
 colNames：['Col 1'，' Col 2'，'Col 3']，
 colModel：[
 {name：'c1'，width：100}，
 {name：'c2'，width：100}，
 {名称：'c3'，宽度：100} 
]，
 ... 
}）; 
} 
} 
 
 $（＃grid）。jqGrid（gridParams）; 
  

但这只是悲惨地失败：

这是不支持还是我做错了？

解决方案

如果我正确理解了您的问题，那么您要删除子网格中没有元素的行的+（展开子网格）图标。在这种情况下，您可以按照旧答案中描述的旧技巧进行操作。您可以添加 loadComplete 句柄，从网格中删除一些+图标，其中包含 subGrid：true 选项。你只需要知道网格中没有子网格的所有行的rowid，并为行做。

  $（＃+ rowid +> td.sgcollapsed）。unbind（click）。html（）; 
  

更新：我发布了免费的jqGrid ，可以轻松实现没有上述黑客攻击的要求。

The演示演示了新功能。实施非常简单。它在 subGridOptions 中包含 hasSubgrid 回调。回调有选项这是具有属性 rowid ，数据和两个不太重要的属性 iRow 和 iCol 。演示代码使用 options.data 表示行的数据。只有当输入行的 tax 更高为20时，该演示才会创建子网格。

  subGridOptions：{
 hasSubgrid：function（options）{
 return parseFloat（options.data.tax）> 20; 
} 
} 
  

您可以使用 mySubgrids [ options.data.rowid] .length 在你的情况下，如果我正确理解输入数据的格式。

I created a grid with multiple sub-grid levels using jqGrid and with a little help from this answer. Here is what I have currently:

I am trying to modify it in a way to only show the sub grid if there is data to show. In other words if the count > 0. Logically I tried to add a condition (pseudo code below, based on previously mentioned answer):

Original Code

var gridParams = {
    datatype: 'local',
    data: myGridData,
    colNames: ['Column 1', 'Column 2'],
    colModel: [
        { name: 'col1', width: 200 },
        { name: 'col2', width: 200 }
    ],
    ...
    subGrid: true,
    subGridRowExpanded: function (subgridDivId, rowId) {
        var subgridTableId = subgridDivId + "_t";
        $("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
        $("#" + subgridTableId).jqGrid({
            datatype: 'local',
            data: mySubgrids[rowId],
            colNames: ['Col 1', 'Col 2', 'Col 3'],
            colModel: [
                { name: 'c1', width: 100 },
                { name: 'c2', width: 100 },
                { name: 'c3', width: 100 }
            ],
            ...
        });
    }
}

$("#grid").jqGrid(gridParams);

Adjusted Code

var gridParams = {
    datatype: 'local',
    data: myGridData,
    colNames: ['Column 1', 'Column 2'],
    colModel: [
        { name: 'col1', width: 200 },
        { name: 'col2', width: 200 }
    ],
    ...
}

// Condition added HERE
if (count > 0)
{
    gridParams.subGrid = true;
    gridParams.subGridRowExpanded = function (subgridDivId, rowId) {
        var subgridTableId = subgridDivId + "_t";
        $("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
        $("#" + subgridTableId).jqGrid({
            datatype: 'local',
            data: mySubgrids[rowId],
            colNames: ['Col 1', 'Col 2', 'Col 3'],
            colModel: [
                { name: 'c1', width: 100 },
                { name: 'c2', width: 100 },
                { name: 'c3', width: 100 }
            ],
            ...
        });
    }
}

$("#grid").jqGrid(gridParams);

but that just fails miserably:

Is this simply not supported or I am doing something wrong?

解决方案

If I correctly understand your question then you want to remove "+" (expand subgrid) icon for rows which have no elements in the subgrid. In the case you can follow the old trick described in the old answer. You can add loadComplete handle which removes some "+" icons from the grid having subGrid: true option. You need just know rowids of all rows of the grid which have no subgrid and do for the rows

$("#" + rowid + ">td.sgcollapsed").unbind("click").html("");

UPDATED: I posted the modification of free jqGrid which allows easy implement the requirement without the above hack.

The demo demonstrates the new feature. The implementation is very easy. It contains hasSubgrid callback inside of subGridOptions. The callback have options which is object with the properties rowid, data and two less important properties iRow and iCol. The code of the demo uses options.data which represent the data of the row. The demo creates subgrid only if input row have tax higher as 20.

subGridOptions: {
    hasSubgrid: function (options) {
        return parseFloat(options.data.tax) > 20;
    }
}

You can use mySubgrids[options.data.rowid].length in your case, if I correctly understand the format of your input data.

这篇关于如何仅在某些行上显示jqGrid子网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！