客戶端分頁不能在jqGrid中使用JSON工作

Question

我是jQuery和jqGrid的新用戶。我正在嘗試使用客戶端分頁來實現jqGrid。這不是我的最終目標。我正在使用.net 4.0 web服務來獲取json響應。

這是我的web服務代碼

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。

希望這可以幫助您識別您的問題。