展开子网格时不显示 JSON 数据

本文关键字:显示 JSON 数据 网格 | 更新日期: 2023-09-27 17:56:30

我有一个jqGrid,当单击一行时,它需要展开并显示次要结果。我扩展了行,但未填充子网格。

Javascript for jqGrid

var mainGridPrefix = "s_";
$("#contractSearchResults").jqGrid({
    loadingtext: '<img src="~/Content/Images/loading.gif"/>',
    url: '/Search/GetContractResultsJson?searchTerm=' + $('#searchTerm').attr("value"),
    //pager: '#pager',
    datatype: 'json',
    mtype: 'GET',
    colNames: ['Contract #', 'Versions', 'Version Name', 'Supplier', 'Description', 'Start Date', 'End Date', 'Portfolio Specialist'],
    colModel: [
        { name: 'Contract #', resizable: true, sortable: false },
        { name: 'Versions', resizable: true, sortable: false },
        { name: 'VersionName', resizable: true, sortable: false },
        { name: 'Supplier', resizable: true, sortable: false },
        { name: 'tDescription', resizable: true, sortable: false },
        { name: 'StartDate', resizable: true, sortable: false },
        { name: 'EndDsate', resizable: true, sortable: false },
        { name: 'PortfolioSpecialist', resizable: true, sortable: false }
    ],
    rowNum: 25,
    rowList: [25, 50, 75, 100],
    height: '100%',
    width: '900',
    shrinkToFit: '900',
    gridview: true,
    idPrefix: mainGridPrefix,    
    jsonReader: {
        rows: "rowData",
        page: "page",
        total: "total",
        records: "records",
        cell: 'cell',
        id: 'id'
    },
    loadComplete: function () {
        loadComplete();
    },
    subGrid: true,
    beforeProcessing: function (data) {
        var rows = data.rows, l = rows.length, i, item, subgrids = {};
        for (i = 0; i < l; i++) {
            item = rows[i];
            if (item.actionSet) {
                subgrids[item.id] = item.actionSet;
                alert(subgrids[item.id]);
            }
        }
        data.userdata = subgrids;
    },
    subGridRowExpanded: function (subgridDivId, rowId) {
        var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
        pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
        subgrids = $("#contractSearchResults").getGridParam("userData");
        $subgrid.appendTo('#' + $.jgrid.jqID(subgridDivId));
        $subgrid.jqGrid({
            datatype: 'local',
            data: subgrids[pureRowId],
            colNames: ['ContractID', 'Price Protection Date', 'Approval Status'],
            colModel: [
                { name: 'ContractID', key: true, hidden: true },
                { name: 'Price Protection Date', formatter: 'date', sorttype: 'date' },
                { name: 'Approval Status' }
            ],
            index: 'ContractID',
            height: '100%',
            rowNum: 10000,
            autoencode: true,
            autowidth: true,
            localReader: {
                repeatitems: true
            },
            gridview: true,
            idPrefix: rowId + "_",
            viewrecords: true
        });
    }
});

这就是我形成Json的方式

public JsonResult MockJsonForContract()
{
    var rowData = GetMockContracts().Select(x => new
    {
        id = x.ContractNumber,
        cell = new[] 
        { 
            x.ContractNumber, 
            x.VersionCount.ToString(),
            x.VersionName,
            x.ManufacturerName,
            x.ContractDescription,
            x.VersionStartDate.ToShortDateString(),
            x.VersionEndDate.ToShortDateString(),
            x.PortfolioSpecialist,                                
        },
        subGrid = new[]
        {
            x.ContractID.ToString(),
            x.PriceProtectionEndDate.ToShortDateString(),
            x.ApprovalStatus
        }
    }).ToList();
    //Instantiate the JsonResult object
    JsonResult result = new JsonResult();
    //Set the behavior to allow gets
    result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
    //Add the JSON array to the JsonResult object
    result.Data = new
    {
        total = 1,
        page = 1,
        records = rowData.Count(),
        rows = rowData
    };
    //Return the Json Object
    return result;
}

public IEnumerable<ContractSearchResultsModel> GetMockContracts()
{
    yield return new ContractSearchResultsModel
    {
        ContractID = 1,
        ContractNumber = "M00001",
        VersionCount = 1,
        VersionName = "Mock Contract",
        ManufacturerName = "Mock Name",
        ContractDescription = "This is a mock contract",
        VersionStartDate = DateTime.Now,
        VersionEndDate = new DateTime(2015, 12, 12),
        PortfolioSpecialist = "Mock Name",
        PriceProtectionEndDate = new DateTime(2016, 1, 1),
        ApprovalStatus = "Approved"
    };
    yield return new ContractSearchResultsModel
    {
        ContractID = 2,
        ContractNumber = "M00002",
        VersionCount = 1,
        VersionName = "Mock Contract",
        ManufacturerName = "Mock Name",
        ContractDescription = "This is a mock contract",
        VersionStartDate = DateTime.Now,
        VersionEndDate = new DateTime(2015, 12, 12),
        PortfolioSpecialist = "Mock Name",
        PriceProtectionEndDate = new DateTime(2016, 1, 1),
        ApprovalStatus = "Approved"
    };
    yield return new ContractSearchResultsModel
    {
        ContractID = 3,
        ContractNumber = "M00003",
        VersionCount = 1,
        VersionName = "Mock Contract",
        ManufacturerName = "Mock Name",
        ContractDescription = "This is a mock contract",
        VersionStartDate = DateTime.Now,
        VersionEndDate = new DateTime(2015, 12, 12),
        PortfolioSpecialist = "Mock Name",
        PriceProtectionEndDate = new DateTime(2016, 1, 1),
        ApprovalStatus = "Approved"
    };
    yield return new ContractSearchResultsModel
    {
        ContractID = 4,
        ContractNumber = "M00004",
        VersionCount = 1,
        VersionName = "Mock Contract",
        ManufacturerName = "Mock Name",
        ContractDescription = "This is a mock contract",
        VersionStartDate = DateTime.Now,
        VersionEndDate = new DateTime(2015, 12, 12),
        PortfolioSpecialist = "Mock Name",
        PriceProtectionEndDate = new DateTime(2016, 1, 1),
        ApprovalStatus = "Approved"
    };
}

主要问题是当我不使用模拟数据时,我正在调用服务来获取数据,并且我只想调用该服务一次,因为查询可以返回 100k 或更多行。

这是 JSON 如何形成的问题还是其他问题?

展开子网格时不显示 JSON 数据

beforeProcessing: function (data) {
    var rows = data.rows, l = rows.length, i, item, subgrids = {};
    for (i = 0; i < l; i++) {
        item = rows[i];
        if (item.actionSet) {
            subgrids[item.id] = item.actionSet;
            alert(subgrids[item.id]);
        }
    }
    data.userdata = subgrids;
}

问题是item.actionSet需要更改以引用我发送回网格的JSON数据的正确部分。

这就是它所需要的

var rows = data.rows, l = rows.length, i, item, subgrids = {};
    for (i = 0; i < l; i++) {
        item = rows[i];
        if (item.subGrid) {
            subgrids[item.id] = item.subGrid;
        }
    }
    data.userdata = subgrids;