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

问题描述

我使用

我正在尝试以仅在有数据要显示时才显示子网格的方式对其进行修改.换句话说，如果 count >0.从逻辑上讲，我尝试添加一个条件(下面的伪代码，基于前面提到的答案):

原始代码

var gridParams = {数据类型:'本地'，数据:myGridData，colNames:['第 1 列'，'第 2 列']，col型号:[{名称:'col1'，宽度:200}，{名称:'col2'，宽度:200 }],...子网格:真，subGridRowExpanded:函数(subgridDivId，rowId){var subgridTableId = subgridDivId + "_t";$("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");$("#" + subgridTableId).jqGrid({数据类型:'本地'，数据:mySubgrids[rowId]，colNames:['Col 1'，'Col 2'，'Col 3']，col型号:[{名称:'c1'，宽度:100}，{名称:'c2'，宽度:100}，{名称:'c3'，宽度:100 }],...});}}$("#grid").jqGrid(gridParams);

调整后的代码

var gridParams = {数据类型:'本地'，数据:myGridData，colNames:['第 1 列'，'第 2 列']，col型号:[{名称:'col1'，宽度:200}，{名称:'col2'，宽度:200 }],...}//这里添加的条件如果(计数 > 0){gridParams.subGrid = true;gridParams.subGridRowExpanded = function (subgridDivId, rowId) {var subgridTableId = subgridDivId + "_t";$("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");$("#" + subgridTableId).jqGrid({数据类型:'本地'，数据:mySubgrids[rowId]，colNames:['Col 1'，'Col 2'，'Col 3']，col型号:[{名称:'c1'，宽度:100}，{名称:'c2'，宽度:100}，{名称:'c3'，宽度:100 }],...});}}$("#grid").jqGrid(gridParams);

但这只是惨败:

这是根本不支持还是我做错了什么?

解决方案

如果我正确理解了您的问题，那么您想要删除子网格中没有元素的行的+"(展开子网格)图标.在这种情况下，您可以遵循旧答案中描述的旧技巧.您可以添加 loadComplete 句柄，从具有 subGrid: true 选项的网格中删除一些+"图标.您只需要知道网格中没有子网格的所有行的 rowid 并为行做这些

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

更新:我发布了 free jqGrid 的修改，其中无需上述技巧即可轻松实现要求.

演示演示了新功能.实施非常简单.它包含 subGridOptions 内的 hasSubgrid 回调.回调有 options，它是具有属性 rowid、data 和两个不太重要的属性 iRow 和 的对象>iCol.演示代码使用 options.data 表示行的数据.仅当输入行的 tax 高于 20 时，演示才会创建子网格.

subGridOptions: {hasSubgrid:函数(选项){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屋！