Jqgrid:将子网格添加到特定父网格列中,并在页脚处添加总和

时间:2014-01-15 15:53:56

标签: json jqgrid hierarchy

我已经嵌套了这个嵌套的Json数据,需要将它变成一个带有Subgrid的Grid,它在一个特定的列中对齐。

我试图实现下面的几件事 - 扩展后的父母(ParentGrid)

+ ParentColumn1   |                 ParentColumn2(5) | ParentColumn3               |
  LeaveBlank      |FirstChildCol1 | ChildColA(3)     | ChildColX      |ChildColY   |
  LeaveBlank      |FirstChildCol1 | ChildColA(2)     | ChildColX      |ChildColY   |     
  SumColumn1(sum) |                 SumColumn=(10)   | SumColumn3+X(sum)           |

父母和孩子之间几乎没有任何关系,例如Id - 例如,ParentColumn1不是ChildCol1的父亲,我必须找到一种方法在ParentColumn2的列下面手动插入ChildCol1和ChildCol2。稍后,我需要总结具有不相关父级的列。例如在页脚显示的ParentColumn3 + ChildColX中的值之和。我希望这个解释对于我在这里尝试做的事情已经足够清楚了。

我想澄清的另一件事是ChildCol是来自ParentGrid的相同返回Json数据的嵌套数据,但是没有相关的Id可以使用。

这里有没有人做过这种网格?我找不到Oleg为其他人提供的解决方案类似的东西,任何人都知道这样做是否可行?请告知或帮助我现在真的碰到了墙。

以下是我还没有完成的事情 旧的更新:我设法通过这个远远得到子网格绑定嵌套数据

1)如何' slot'在整个子网格下面,假设第3列是我的名字'柱?  我尝试通过CSS完成它仍然没有运气+我放弃了这个想法,因为最终,我希望能够重新定位列,并能够将子网格与特定列绑在一起。有没有办法做到这一点??

2)目前我的子网格上有这个问题 - 关于悬停在上面。在主网格中,当您将鼠标悬停在每个不同的行上时,行会突出显示。但是,当我展开子网格并在行上方盘旋时,整个子网格 - 也就是整个子网格'突出显示。如果我的鼠标悬停在子网格中的各个行上,则没有任何反应,但仍会突出显示整个td。如何解决这个问题?

如果你们中的任何人能提供一些帮助,我将不胜感激。发布了几天但仍然没有回复...

更新的代码:

    var $grid = $("#grid"),
         mainGridPrefix = "s_";
    $grid.jqGrid({
        url: "@Url.Action("GetDeliverySubscription", "AccountManagement")",
        datatype: 'json',
        height: '100%',
        width: 460,
        mtype: "GET",
        postData: { acctCode: "1" },
        jsonReader: {
            repeatitems: false,
            root: "Details"
        },
        colNames: ['Permissioned', 'Subscribed', 'Name'],
        colModel: [
            {
                name: 'Xpermissioned', width: 95, index: 'Xpermissioned',
                align: "right",
                editable: true,
                edittype: 'checkbox', editoptions: { value: "True:False" },
                formatter: "checkbox"
            },
            {
                name: 'Xsubscribed', width: 80, index: 'Xsubscribed',
                align: "right", formatter: "checkbox"
            },
            { name: "SourceName", index: "SourceName" }
        ],
        //pager: "#AccountSubscriptionPager",
        rowList: [20, 40, 60],
        rowNum: 20,
        autoencode: true,
        subGrid: true,
        idPrefix: mainGridPrefix,
        beforeProcessing: function (data) {
            var rows = data.Details, l = rows.length, i, items, subgrids = {};
            for (i = 0; i < l; i++) {
                item = rows[i];
                if (item.AvailableDeliveryTargets) {
                    subgrids[i + 1] = item.AvailableDeliveryTargets;
                }
            }
            data.userdata = subgrids;
        },
        subGridRowExpanded: function (subgridDivId, rowId) {
            var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
                pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
                subgrids = $(this).jqGrid("getGridParam", "userData");

            $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
            $subgrid.jqGrid({
                datatype: "local",
                data: subgrids[pureRowId],
                colNames: ["Subscribed", "Name"],
                colModel: [
                    {
                        name: 'xSubscribed', index: "xSubscribed",
                        formatter: "checkbox", width: 175, align: "right"

                    },
                    { name: "Name", index: "Name" }
                ],
                autowidth: false,
                width: 425,
                height: "100%",
                autoencode: true,
                jsonReader: {
                    repeatitems: false
                },
                gridview: true,
                idPrefix: rowId + "_"
            });
            $subgrid.closest("div.ui-jqgrid-view")
                .children("div.ui-jqgrid-hdiv")
                .hide();
        }
    });

var $grid = $("#grid"), mainGridPrefix = "s_"; $grid.jqGrid({ url: "@Url.Action("GetDeliverySubscription", "AccountManagement")", datatype: 'json', height: '100%', width: 460, mtype: "GET", postData: { acctCode: "1" }, jsonReader: { repeatitems: false, root: "Details" }, colNames: ['Permissioned', 'Subscribed', 'Name'], colModel: [ { name: 'Xpermissioned', width: 95, index: 'Xpermissioned', align: "right", editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox" }, { name: 'Xsubscribed', width: 80, index: 'Xsubscribed', align: "right", formatter: "checkbox" }, { name: "SourceName", index: "SourceName" } ], //pager: "#AccountSubscriptionPager", rowList: [20, 40, 60], rowNum: 20, autoencode: true, subGrid: true, idPrefix: mainGridPrefix, beforeProcessing: function (data) { var rows = data.Details, l = rows.length, i, items, subgrids = {}; for (i = 0; i < l; i++) { item = rows[i]; if (item.AvailableDeliveryTargets) { subgrids[i + 1] = item.AvailableDeliveryTargets; } } data.userdata = subgrids; }, subGridRowExpanded: function (subgridDivId, rowId) { var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"), pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId), subgrids = $(this).jqGrid("getGridParam", "userData"); $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId)); $subgrid.jqGrid({ datatype: "local", data: subgrids[pureRowId], colNames: ["Subscribed", "Name"], colModel: [ { name: 'xSubscribed', index: "xSubscribed", formatter: "checkbox", width: 175, align: "right" }, { name: "Name", index: "Name" } ], autowidth: false, width: 425, height: "100%", autoencode: true, jsonReader: { repeatitems: false }, gridview: true, idPrefix: rowId + "_" }); $subgrid.closest("div.ui-jqgrid-view") .children("div.ui-jqgrid-hdiv") .hide(); } });

<德尔> 你能告诉我如何从详细信息开始正确绑定数据吗?如何为AvailableDeliveryTarget创建另一个子网格?

这是我原始的Json数据(抱歉,我不知道如何让它们成为Json的样子)

0 个答案:

没有答案