如何在 ASP.NET MVC 5 中的 jqgrid 中显示子网格？答案

【问题标题】：How to show subgrid in jqgrid in ASP.NET MVC 5?如何在 ASP.NET MVC 5 中的 jqgrid 中显示子网格？
【发布时间】：2015-08-24 14:24:05
【问题描述】：

我的 jqgrid 运行良好，但现在我正在实现子网格。它显示 + 号，当我单击它时，显示加载的空白行....这是客户端代码

$(document).ready(function () {
    $("#Grid").jqGrid({
        url: '/Home/GetDetails',
        datatype: 'json',
        myType: 'GET',
        colNames: ['id','Name', 'Designation', 'Address', 'Salary'],
        colModel: [

            { key: false, name: 'Id', index: 'Id',  },
            { key: false, name: 'Name', index: 'Name', editable: true },
            { key: false, name: 'Designation', index: 'Designation', editable: true },
            { key: false, name: 'Address', index: 'Address', editable: true },
            { key: false, name: 'Salary', index: 'Salary', editable: true }

        ],
        jsonReader: {
            root: 'rows',
            page: 'page',
            total: 'total',
            records: 'records',
            id: '0',
            repeatitems: true
        },
        pager: $('#pager'),
        rowNum: 10,
        rowList: [10, 20, 30],
        width: 600,
        viewrecords: true,
        multiselect: true,
        sortname: 'Id',
        sortorder: "desc",
        caption: 'Employee Records',
        loadonce: true,
        gridview: true,
        autoencode: true,
        subGrid: true,
        subGridUrl: '/Home/Subgrid',
        subGridModel: [{
            name: ['No', 'Item','Quantity'],
            width: [55, 55,55]
        }
        ],
    }).navGrid('#pager', { edit: true, add: true, del: true },
    {
        zIndex: 100,
        url: '/Home/Edit',
        closeOnEscape: true,
        closeAfterEdit: true,
        recreateForm: true,
        afterComplete: function (response) {
            if (response.responseText)
            {
                alert(response.responseText);
            }
        }
    },
    {
        zIndex: 10,
        url: '/Home/Add',
        closeOnEscape: true,
        closeAfterEdit: true,
        recreateForm: true,
        afterComplete: function (response) {
            if (response.responseText) {
                alert(response.responseText);
            }
        }
    },
    {
        zIndex: 100,
        url: '/Home/Delete',
        closeOnEscape: true,
        closeAfterEdit: true,
        recreateForm: true,
        afterComplete: function (response) {
            if (response.responseText) {
                alert(response.responseText);
            }
        }
    }

    );

});

Subgrid url 动作方法如下：

  public JsonResult Subgrid(String id)
  {
    Database1Entities db = new Database1Entities();

    Product  p= new Product {No=1,Item="Juice",Quantity=23};
    var jsondata = new { rows=2,
                         cell = new string[] { p.No.ToString(),
                                            p.Item,p.Quantity.ToString()}.ToArray()
     };

    return Json(jsondata, JsonRequestBehavior.AllowGet);
    }

我是第一次这样做。有什么错误？提前谢谢

【问题讨论】：

标签： model-view-controller jqgrid

【解决方案1】：

我不建议您使用subGridModel。取而代之的是，使用Subgrid as Grid 更加灵活。如果用户单击“+”图标（展开子网格），那么 jqGrid 只会在选中的下方插入空行，例如 the answer 中描述的简单结构。需要显示一些自定义“子网格”信息的<div> 的id 将是您需要实现的subGridRowExpanded 回调的第一个参数。第二个参数是扩展行的rowid。通过实现相应的回调，您可以创建 any 自定义“子网格”。非常简单的demo，请参见the old answer。

所以你需要做的就是编写创建网格的代码，该网格将放置在子网格行中。仅严格建议使用 idPrefix 参数，该参数使用任何取决于 subgriddivid 或父 rowid 的值。此外，您可以考虑为子网格使用autowidth: true 选项，这将使子网格的宽度与主网格的宽度完全对应。将父行的 rowid 作为id 参数发送到'/Home/Subgrid' 你需要使用postData: { id: rowid }。例如，参见我之前引用的来自the answer 的代码。

【讨论】：