jqGrid正在加载JSON，但没有显示它

本文关键字：显示 加载 JSON jqGrid | 更新日期: 2023-09-27 18:29:21

我已经阅读了关于这个问题的各种各样的帖子和文档，我已经尝试了我所读到的和能想到的一切——仍然被难住了。

我正在尝试将JSON数据从服务器加载到Dot-Net-Nuke网站中的jqGrid中。使用DNN不是我的选择，所以没有不使用它的选择。也就是说，我已经建立了一个标准的DNN网站，并添加了一个C#类库项目（名为ApiLibrary）。在它中，有两个类：

RouteMapper.cs

using DotNetNuke.Web.Api;
namespace ApiLibrary
{
    public class RouteMapper : IServiceRouteMapper
    {
        public void RegisterRoutes(IMapRoute mapRouteManager)
        {
            mapRouteManager.MapHttpRoute("ApiLibrary", "default", "{controller}/{action}", new[] { "ApiLibrary" });          
        }
    }
}

以及WelcomeController.cs，其中包含我的AJAX函数。我在jqGrid中使用的是以下内容：

[WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json, RequestFormat = WebMessageFormat.Json)]
public string GetMyData(string sidx, string sord, int page, int rows)
        {
            var myList = GetTransportTable(); // returns List<TransportInfo>
            var rowlist = new List<Row>() { };
            int m = 0;
            for (var i = 0; i < myList.Count; i++)
            {
                m = i + 1;
                Row rowobj = new Row();
                var stringList = new List<string>();
                rowobj.id = m.ToString();
                stringList.Add(myList[i].Pilot);
                stringList.Add(myList[i].Vessel);
                stringList.Add(myList[i].Dock);
                stringList.Add(myList[i].Amount.ToString("c"));
                rowobj.cell = stringList;
                rowlist.Add(rowobj);
            }
            var jsonToReturn = new
            {
                total = 3,
                page = 1,
                records = myList.Count.ToString(),
                rows = rowlist.ToArray()
            };

            string jData = string.Empty;        
            jData = JsonConvert.SerializeObject(jsonToReturn);
            return jData;
        }

这将返回100%有效的JSON（在jslint上验证），其格式为jqGrid所需的格式，即：

{"总计"："4"，"page"："1"，"记录"："4"，"行"：[{"id"："1"，"cell"：["Myname"，"Myboat"，"MySdock"，"144"]}，{"id"："2"，"cell"：["Myname1"，"Myboat1"，"MySdock1"，"1414"]}]}

对于jqGrid文档中列出的每个事件，如果在该事件期间执行alert()来显示数据，那么它将显示我格式完美的JSON。这告诉我，jqGrid接收数据很好，但有些东西阻止了它显示数据。

我尝试过使用jsonReader、jsonmap，以及我遇到的几乎所有其他建议/选项。

我已经反复检查了我的javascript和css引用，这些都很好用。这是我加载网格的Javascript：

$("#reviewList").jqGrid({
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
url: 'DesktopModules/ApiLibrary/API/Welcome/GetMyData',
jsonReader: {
                repeatitems: false,
                id: "id",
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                cell: "cell"
            },
colNames: ['Pilot', 'Vessel', 'Dock', 'Amount'],
colModel: [
 { name: 'Pilot', width: 250, align: 'center' },
 { name: 'Vessel', width: 250, align: 'center' },
 { name: 'Dock', width: 175, align: 'center' },
 { name: 'Amount', width: 110, align: 'center' }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: "#pager2",
viewrecords: true,
sortname: 'Pilot',
sortorder: 'asc',
caption: 'Transport List Overview'
 }).navGrid("#pager2", { edit: false, add: false, del: false });

值得注意的是，我在同一个页面上使用了其他几个AJAX调用jQuery（包括GET和POST），并且在解析任何JSON时都没有遇到任何问题。此外，使用JSON（来自jqGrid之外的jQueryAJAX调用），我可以在jqGrid中显示它。然而，由于它是本地数据，我无法对其进行排序/分页/搜索-这对我没有好处。

出了什么问题？

jqGrid正在加载JSON，但没有显示它

我深入研究了DNN服务框架，通过在WelcomeController.cs中将我的AJAX方法修改为以下方法，我能够实现这一点：

    [System.Web.Http.HttpPost]
    public HttpResponseMessage GetMyData()
    {
        var myList = GetTransportTable(); //returns List<TransportInfo>
        var rowlist = new List<Row>() { };
        for (var i = 0; i < myList.Count; i++)
        {
            Row rowobj = new Row();
            var stringList = new List<string>();
            rowobj.id = i;
            stringList.Add(myList[i].DockDate.ToString("d"));
            stringList.Add(myList[i].Pilot);
            stringList.Add(myList[i].Vessel);
            stringList.Add(myList[i].Dock);
            stringList.Add(myList[i].Amount.ToString("c"));
            rowobj.cell = stringList;
            rowlist.Add(rowobj);
        }
        var jsonToReturn = new
        {
            total = 1,
            page = 1,
            records = myList.Count.ToString(),
            rows = rowlist
        };
        return Request.CreateResponse(HttpStatusCode.OK, jsonToReturn);
    }

在我的javascript中，我删除了jsonReader并添加了mtype:'POST'。新的jqGrid函数是：

$("#reviewList").jqGrid({
            loadError: function(xhr, status, error) {
                alert('load error: ' + error);
            },    
            mtype: 'POST',
            ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
            url: 'DesktopModules/ApiLibrary/API/Welcome/GetMyData',
            datatype: "json",
            colNames: ['Date','Pilot', 'Vessel', 'Dock', 'Amount'],
            colModel: [
                {name: 'DockDate', index:'DockDate', width: 90,  align: 'center'},                
                { name: 'Pilot', index: 'Pilot', width: 250, sortable: true, align: 'center' },
                { name: 'Vessel', index: 'Vessel', width: 250, sortable: true, align: 'center' },
                { name: 'Dock', index: 'Dock', width: 175, sortable: true, align: 'center' },
                { name: 'Amount', index: 'Amount', width: 110, sortable: true, align: 'center', sorttype: 'float' }
            ],
            rownumbers: true,
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: "#pager2",
            viewrecords: true,
            caption: 'Transport List Overview',
            height: "auto"
            //loadonce: true
        }).navGrid("#pager2", { edit: false, add: false, del: false });
相关文章：