客户端分页无法在 jqGrid 中使用 JSON

Question

我是 jQuery 和 jqGrid 的新用户。我正在尝试使用客户端分页来实现 jqGrid。它在我的最后不起作用。我正在使用 .net 4.0 网络服务来获取 json 响应。

这是我的网络服务代码

 public string GetMessage(string FDate,string TDate,string Status)
{
 databaseDataContext dc = new databaseDataContext();
var v = (from v1 in dc.WBS_MESSAGEs
where v1.TransStatus ==  Status && v1.CreatedDate >= fromDate
                 && v1.CreatedDate <= toDate
                 select new
                 {
                     v1.MessageID,
                     v1.Task,
                     v1.Remark,
                     v1.CreatedDate,
                     Object = (v1.ObjectID == "2" ? "Business Partner" :
                         v1.ObjectID == "30" ? "Journals" : "Unknown")
                 });
        if (v.Count() > 0)
        {

            System.Web.Script.Serialization.JavaScriptSerializer js = new 
                  System.Web.Script.Serialization.JavaScriptSerializer();
            return js.Serialize(v.ToList());
        }
        else
        {
            return null;
        }
}

这是我的 JavaScript / jqGrid 代码

function callMessage(p0, p1,p2,ctrlName) {
            $.ajax({
                type: "POST",
                url: "SAPBOne.asmx/GetMessage",
                data: '{ "FDate":"' + p0 + '" ,"TDate":"' + p1 + '","Status":"' + p2 + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                error: function (data) {
                    alert(data.statusText);
                },

                success: function (data) {
                    var thegrid = jQuery(ctrlName)[0];
                    thegrid.addJSONData(JSON.parse(data.d));
                    // var jSonMessage = JSON.parse(data.d); // data.d is a JSON formatted string, to turn it into a JSON object
                    // we use JSON.parse
                    // now that myData is a JSON object we can access its properties like normal
                }
            });
        };

  $(window).load(function () {
            var qString = get_query();
            //Get Success Messages
            jQuery("#jsonmap").jqGrid({
                url: callMessage(qString.p0, qString.p1,'Success','#jsonmap'), 
                datatype: 'json', 
                colNames: ['Message ID', 'Object', 'Task', "CreatedDate", 'Remark'],
                ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
                colModel: [
                                { name: 'MessageID', index: 'MessageID asc', sortable: true, align: "center", width: 55 },
                                { name: 'Object', index: 'Object', width: 120, jsonmap: "Object" },
                                { name: 'Task', index: 'Task', width: 80, jsonmap: "Task", align: "center" },
                                { name: 'CreatedDate', index: 'CreatedDate', jsonmap: "CreatedDate", align: "center", formatter: 'date', formatoptions: { srcformat: 'yyyyMMdd', newformat: 'd-M-y @ H:i:s' }, width: 140 },
                                { name: 'Remark', index: 'Remark', width: 300, jsonmap: "Remark" }
                            ],
                serializeGridData: function (postData) {
                    return JSON.stringify(postData);
                }, 
                loadtext: "Loading...",
                rowNum:5,
                rowList: [5, 10],
                pager: '#pjmap', 
                sortname: 'MessageID', 
                sortorder: "desc",
                viewrecords: true,
                gridview: true,
                loadonce:true,
                sortorder: "desc",
                sortname: 'MessageID',
                caption: "Success",
                pgbuttons: true, 
                height: 'auto',
                refreshtext:'Refresh',
                repeatitems: true,
                emptyrecords: "No records to view"
            });
            jQuery("#jsonmap").jqGrid('navGrid', '#pjmap', { edit: false, add: false, del: false  });

我被困在这里了。

您的帮助将不胜感激。

Answer 1

我希望你的 jQgrid 定义没有问题。我已经用本地数据尝试了你的代码。它工作正常。你需要检查两件事。首先，您的 ajax 函数是否从 Web 服务返回数据。其次，如果它返回检查它是否提供正确的数据类型（在你的情况下json）。

我通过删除几行代码来简化您的代码，

$(document).ready(function (event) {

var mydata = [
  { MessageID: '1', Object: 'sample text', Task: 'Task 1', CreatedDate: '20140226',Remark: 'good'},
  { MessageID: '2', Object: 'sample 1', Task: 'Task 1', CreatedDate: '20140226',Remark: 'good'},
  { MessageID: '3', Object: 'sample 2', Task: 'Task 2', CreatedDate: '20140226',Remark: 'good'},
  { MessageID: '4', Object: 'sample 3', Task: 'Task 3', CreatedDate: '20140226',Remark: 'good'},
  { MessageID: '5', Object: 'sample 4', Task: 'Task 4', CreatedDate: '20140226',Remark: 'good'},
  { MessageID: '6', Object: 'sample 5', Task: 'Task 5', CreatedDate: '20140226',Remark: 'good'},
  { MessageID: '7', Object: 'sample 6', Task: 'Task 6', CreatedDate: '20140226',Remark: 'good'},
  { MessageID: '8', Object: 'sample 6', Task: 'Task 7', CreatedDate: '20140226',Remark: 'good'},
  { MessageID: '9', Object: 'sample 4', Task: 'Task 8', CreatedDate: '20140226',Remark: 'good'},
  { MessageID: '10',Object: 'sample 6', Task: 'Task 9', CreatedDate: '20140226',Remark: 'good'},
  { MessageID: '11',Object: 'sample 7', Task: 'Task 1', CreatedDate: '20140226',Remark: 'good'},
  { MessageID: '12',Object: 'sample 7', Task: 'Task 1', CreatedDate: '20140226',Remark: 'good'}
    ];

 jQuery("#listArray").jqGrid({
            datatype: 'local', 
            data: mydata, 
            colNames: ['Message ID', 'Object', 'Task', "CreatedDate", 'Remark'],
            ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
            colModel: [
                            { name: 'MessageID', index: 'MessageID asc', sortable: true, align: "center", width: 55 },
                            { name: 'Object', index: 'Object', width: 120, jsonmap: "Object" },
                            { name: 'Task', index: 'Task', width: 80, jsonmap: "Task", align: "center" },
                            { name: 'CreatedDate', index: 'CreatedDate', jsonmap: "CreatedDate", align: "center", formatter: 'date', formatoptions: { srcformat: 'yyyyMMdd', newformat: 'd-M-y @ H:i:s' }, width: 140 },
                            { name: 'Remark', index: 'Remark', width: 300, jsonmap: "Remark" }
                        ],
            loadtext: "Loading...",
            rowNum:10,
            rowList: [10,20,50],
            pager: '#jqPager', 
            viewrecords: true,
            caption: "Success",
            height: 'auto',
            refreshtext:'Refresh',
            emptyrecords: "No records to view"
        });
        jQuery("#listArray").jqGrid('navGrid', '#jqPager', { edit: false, add: false, del: false  });

各自的Html部分，

<table id="listArray">
<tr>
    <td />
</tr>
</table>
<div id="jqPager"></div>

您可以查看相应的DEMO。

希望这可以帮助您确定问题。