具有 Entity framework MVC 的 JqGrid 子网格

Question

我想使用 Jqgrid 中的子网格功能显示两个 tables (Parent/Child)。主网格填充来自我的数据模型（父 table）的数据，但是当子网格展开时，子网格 table 的数据未填充。看看我的代码，我哪里出错了？

Jquery

$(function () {
    $("#grid").jqGrid({
        url: "./EditManifest/GetTodoLists",
        datatype: 'json',
        mtype: 'Get',
        colNames: ['ID', 'BL', 'CARRIER BL', 'CARRIER', 'DESTINATION', 'TIN', 'TELEPHONE', 'ADRESS',],
        colModel: [
            { key: true, name: 'ID', index: 'ID', editable: false },
            { key: true, name: 'BL', index: 'BL', editable: false, sortable: true },
            { key: false, name: 'CARRIER_BL', index: 'CARRIER_BL', editable: true, edittype: 'text' },
            { key: false, name: 'CARRIER', index: 'CARRIER', editable: true, edittype: 'text' },
            { key: false, name: 'DESTINATION', index: 'DESTINATION', editable: true, edittype: 'text' },
            { key: false, name: 'TIN', index: 'TIN', editable: true, edittype: 'text' },
            { key: false, name: 'TELEPHONE', index: 'TELEPHONE', editable: true, edittype: 'text' },
            { key: false, name: 'ADRESS', index: 'ADRESS', editable: true, edittype: 'text' },
           ],
        pager: jQuery('#pager'),
        rowNum: 10,
        rowList: [10, 20, 30, 40],
        height: '100%',
        viewrecords: true,
        multiselect: false,
        subGrid: true,
        subGridUrl: "./EditManifest/subgrid",
        subGridModel: [{
            colNames: ['BL', 'Container', 'Size', 'Type', 'TotalWeight', 'HS Code', 'ATA'],
            colModel: [{ key: true, name: "BL", index: "BL", width: 80 },
                        { key: true, name: "ContianerNumber", index: "ContianerNumber", width: 130 },
                        { name: "Contianersize", index: "Contianersize", width: 70 },
                        { name: "ContianerType", index: "ContianerType", width: 70 },
                        { name: "TOTALWEIGHT", index: "TOTALWEIGHT", width: 70 },
                        { name: "hscode", index: "hscode", width: 130 },
                        { name: "ArrivalDate", index: "ArrivalDate", width: 70 }]
        }
        ],
        caption: 'Edit Manifest Data',
        emptyrecords: 'No records to display',
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            Id: "0"
        },
        autowidth: true,
        multiselect: false

    }).navGrid('#pager', { edit: true, add: false, del: false, search: false, refresh: true },
        {
            // edit options
            zIndex: 100,
            url: './EditManifest/Edit',
            closeOnEscape: true,
            closeAfterEdit: true,
            recreateForm: true,
            afterComplete: function (response) {
                if (response.responseText) {
                    alert(response.responseText);
                }
            }
        });
});

控制器

  public class EditManifestController : Controller
    {
        public StatusFollowUPEntities db = new StatusFollowUPEntities();
        public ActionResult Index()
        {
            return View();
        } 
    public JsonResult GetTodoLists(string sidx, string sord, int page, int rows)  
            {
                int pageIndex = Convert.ToInt32(page) - 1;
                int pageSize = rows;
                var todoListsResults = db.tblBLs.Select(
                        a => new
                        {
                            a.ID,
                            a.BL,
                            a.CARRIER_BL,
                            a.CARRIER,
                            a.DESTINATION,
                            a.SAILINGDATE,
                            a.TIN,
                            a.TELEPHONE,
                            a.ADRESS,

                        });
                int totalRecords = todoListsResults.Count();
                var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
                if (sord.ToUpper() == "DESC")
                {
                    todoListsResults = todoListsResults.OrderByDescending(s => s.BL);
                    todoListsResults = todoListsResults.Skip(pageIndex * pageSize).Take(pageSize);
                }
                else
                {
                    todoListsResults = todoListsResults.OrderBy(s => s.BL);
                    todoListsResults = todoListsResults.Skip(pageIndex * pageSize).Take(pageSize);
                }
                var jsonData = new
                {
                    total = totalPages,
                    page,
                    records = totalRecords,
                    rows = todoListsResults
                };
                return Json(jsonData, JsonRequestBehavior.AllowGet);
            }
    public JsonResult subgrid(string id)
            {

                var ctrDetails = db.tblCtrDetails.Where(a => a.BL == id).Select(
                        a => new
                        {

                            a.BL,
                            a.ContianerNumber,
                            a.Contianersize,
                            a.ContianerType,
                            a.TOTALWEIGHT,
                            a.hscode,
                            a.ArrivalDate,


                        });

                //Returning json data
                return Json(ctrDetails);
            }
}

查看

<div>
    <table id="grid"></table>
    <div id="pager"></div>
</div>
<script src="@Url.Content("~/Scripts/.....

Answer 1

您的前端代码和后端代码中存在几个问题。

subGridModel 选项与 root jqGrid 有点不同——没有 colNames 或 colModel，你应该使用 name 和 mapping.

...
subGridModel: [{
    name: [ 'BL', 'Container', 'Size', 'Type', 'TotalWeight', 'HS Code', 'ATA' ],
    mapping: [ 'BL', 'ContianerNumber', 'Contianersize', 'ContianerType', 'TOTALWEIGHT', 'hscode', 'ArrivalDate' ]
}],
...

另外，为了使 mapping 生效，您需要调整 jsonReader 设置。

...
jsonReader: {
    root: 'rows',
    page: 'page',
    total: 'total',
    records: 'records',
    repeatitems: false,
    Id: '0',
    subgrid: {
        root: 'rows',
        repeatitems: false
    }
},
...

现在您的操作需要 return 格式匹配 jsonReader 中定义的设置的数据。

public JsonResult subgrid(string id)
{
    var subGridData = new
    {
        rows = db.tblCtrDetails.Where(a => a.BL == id).Select(a => new
        {
            a.BL,
            a.ContianerNumber,
            a.Contianersize,
            a.ContianerType,
            a.TOTALWEIGHT,
            a.hscode,
            a.ArrivalDate
        })
    };

    return Json(subGridData, JsonRequestBehavior.AllowGet);
}

这应该可以解决问题。

具有 Entity framework MVC 的 JqGrid 子网格

JqGrid SubGrid with Entity framework MVC

jquery

asp.net-mvc

asp.net-mvc-4

jqgrid

subgrid