如何讓 jqGrid 在後端使用 ASP.NET + JSON 工作？

好的，我回來了。我將問題完全簡化為三個簡單的欄位，但使用 addJSONData 方法仍然停留在同一行。我已經堅持了好幾天了，無論我如何修改 ajax 呼叫、json 字元串、等等等等，我都無法讓它工作！手動添加一行數據時，我什至無法讓它作為一個函式工作。任何人都可以發布一個適用於 ASP.NET 和 JSON 的 jqGrid 工作範例嗎？請包含 2-3 個欄位（最好是字元串、整數和日期？）我很高興看到 jqGrid 的工作範例以及使用 addJSONData 方法手動添加 JSON 對象。非常感謝！！如果我得到這個工作，我將發布一個完整的程式碼範例，以獲取 ASP.NET 的幫助，JSON 使用者也堅持這一點。再次。謝謝！！

tbl.addJSONData(objGridData); //err: tbl.addJSONData 不是函式！！

這是我收到此消息時 Firebug 顯示的內容：

• objGridData 對象總計=1 頁=1 記錄=5 行=

$$ 5 $$

○ 頁“1”

記錄“5”

共“1”

行 $$ Object ID=1 PartnerID=BCN, Object ID=2 PartnerID=BCN, Object ID=3 PartnerID=BCN, 2 more… 0=Object 1=Object 2=Object 3=Object 4=Object $$

(index) 0

(prop) ID (value) 1 (prop) PartnerID (value) “BCN” (prop) DateTimeInserted (value) Thu May 29 2008 12:08:45 GMT-0700 (Pacific Daylight Time)

• 一共有三個更多行 這是變數 tbl (value) ‘Table.scroll’ 的值

<TABLE cellspacing="0" cellpadding="0" border="0" style="width: 245px;" class="scroll grid_htable"><THEAD><TR><TH class="grid_sort grid_resize" style="width: 55px;"><SPAN> </SPAN><DIV id="jqgh_ID" style="cursor: pointer;">ID <IMG src="http://localhost/DNN5/js/jQuery/jqGrid-3.4.3/themes/sand/images/sort_desc.gif"/></DIV></TH><TH class="grid_resize" style="width: 90px;"><SPAN> </SPAN><DIV id="jqgh_PartnerID" style="cursor: pointer;">PartnerID </DIV></TH><TH class="grid_resize" style="width: 100px;"><SPAN> </SPAN><DIV id="jqgh_DateTimeInserted" style="cursor: pointer;">DateTimeInserted </DIV></TH></TR></THEAD></TABLE>

這是完整的功能：

$('table.scroll').jqGrid({  
   datatype: function(postdata) {    
       mtype: "POST",    
   $.ajax({  
       url: 'EDI.asmx/GetTestJSONString',  
       type: "POST",  
       contentType: "application/json; charset=utf-8",  
       data: "{}",  
       dataType: "text", //not json . let me try to parse  
       success: function(msg, st) {  
           if (st == "success") {                    
                var gridData;  

               //strip of "d:" notation  
               var result = JSON.parse(msg);   
               for (var property in result) {  
                   gridData = result[property];  
                   break;  
               }  

               var objGridData = eval("(" + gridData + ")"); //creates an object with visible data and structure  
               var tbl = jQuery('table.scroll')[0];  

               alert(objGridData.rows[0].PartnerID); //displays the correct data  

               //tbl.addJSONData(objGridData); //error received: addJSONData not a function  

               //error received: addJSONData not a function (This uses eval as shown in the documentation)  
               //tbl.addJSONData(eval("(" + objGridData + ")"));   

               //the line below evaluates fine, creating an object and visible data and structure  
               //var objGridData = eval("(" + gridData + ")");  
               //BUT, the same thing will not work here  
               //tbl.addJSONData(eval("(" + gridData + ")"));  
               //FIREBUG SHOWS THIS AS THE VALUE OF gridData:  
              // "{"total":"1","page":"1","records":"5","rows":[{"ID":1,"PartnerID":"BCN","DateTimeInserted":new Date(1214412777787)},{"ID":2,"PartnerID":"BCN","DateTimeInserted":new Date(1212088125000)},{"ID":3,"PartnerID":"BCN","DateTimeInserted":new Date(1212088125547)},{"ID":4,"PartnerID":"EHG","DateTimeInserted":new Date(1235603192033)},{"ID":5,"PartnerID":"EMDEON","DateTimeInserted":new Date(1235603192000)}]}"         

           }  
       }  
   });  
   },  
   jsonReader: {  
       root: "rows", //arry containing actual data  
       page: "page", //current page  
       total: "total", //total pages for the query  
       records: "records", //total number of records  
       repeatitems: false,  
       id: "ID" //index of the column with the PK in it   
   },  
   colNames: [  
       'ID', 'PartnerID', 'DateTimeInserted'  
         ],    
   colModel: [    
   { name: 'ID', index: 'ID', width: 55 },    
   { name: 'PartnerID', index: 'PartnerID', width: 90 },  
   { name: 'DateTimeInserted', index: 'DateTimeInserted', width: 100}],  
   rowNum: 10,  
   rowList: [10, 20, 30],  
   imgpath: 'http://localhost/DNN5/js/jQuery/jqGrid-3.4.3/themes/sand/images',  
   pager: jQuery('#pager'),  
   sortname: 'ID',  
   viewrecords: true,  
   sortorder: "desc",  
  caption: "TEST Example")};  

這是一個簡單的例子……

您將需要https://github.com/douglascrockford/JSON-js/blob/master/json2.js 才能使其工作…

當然還有通常的 jquery 文件。

將此粘貼到網路服務

// The lower case properties here are required to be lower case
// I cant find a way to rename them when they are serialized to JSON
// XmlElement("yournamehere") does not work for JSON :(
public class JQGrid
{
   public class Row
   {
       public int id { get; set; }
       public List<string> cell { get; set; }

       public Row()
       {
           cell = new List<string>();
       }
   }

   public int page { get; set; }
   public int total { get; set; }
   public int records { get; set; }
   public List<Row> rows { get; set; }

   public JQGrid()
   {
       rows = new List<Row>();
   }
}


[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class MyWebService : System.Web.Services.WebService
{

   [WebMethod(EnableSession = true)]
   [ScriptMethod(ResponseFormat = ResponseFormat.Json)]    
   public JQGrid GetJQGrid(int page, int pageSize, string sortIndex, string sortDirection)
   {
       DataSet ds = SqlHelper.ExecuteDataset(SqlHelper.CONN_STRING, "udsp_GetMyData",pageIndex, pageSize);

       if (ds == null || ds.Tables.Count < 1)
           throw new Exception("Unable to retrieve data.");

       JQGrid jqGrid = new JQGrid();

       int i = 1;
       foreach (DataRow dataRow in ds.Tables[0].Rows)
       {
           JQGrid.Row row = new JQGrid.Row();

           row.id = Convert.ToInt32(dataRow["MyIdColumn"]);

           row.cell.Add(dataRow["MyIdColumn"].ToString());

           row.cell.Add(dataRow["MyColumn"].ToString());


           projectGrid.rows.Add(row);
       }

       jqGrid.page = 1; // Set this when you are actually doing paging... this is just a sample
       jqGrid.records = jqGrid.rows.Count;
       jqGrid.total = jqGrid.rows.Count;  // Set this to total pages in your result...

       return jqGrid;
   }
}

將此粘貼到您的 aspx 頁面

<script type="text/javascript">
function getData(pdata) {
   var params = new Object();
   params.page = pdata.page;
   params.pageSize = pdata.rows;
   params.sortIndex = pdata.sidx;
   params.sortDirection = pdata.sord;


   $.ajax({
       type: "POST",
       contentType: "application/json; charset=utf-8",
       url: "/CLM/CLM.asmx/GetProjectGrid2",
       data: JSON.stringify(params),
       dataType: "json",
       success: function(data, textStatus) {
           if (textStatus == "success") {
               var thegrid = $("#testGrid")[0];
               thegrid.addJSONData(data.d);
           }
       },
       error: function(data, textStatus) {
           alert('An error has occured retrieving data!');
       }
   });
}

var gridimgpath = '/clm/css/ui-lightness/images';
$(document).ready(function() {
   $("#testGrid").jqGrid({
       datatype: function(pdata) {
           getData(pdata);
       },
       colNames: ['My Id Column', 'My Column'],
       colModel: [
           { name: 'MyIdColumn', index: 'MyIdColumn', width: 150 },
           { name: 'My Column', index: 'MyColumn', width: 250 }
       ],
       rowNum: 10,
       rowList: [10, 20, 30],
       imgpath: gridimgpath,
       pager: jQuery('#pagerdt'),
       sortname: 'id',
       viewrecords: false,
       sortorder: "desc",
       caption: "Projects",
       cellEdit: false
   });
});
</script>

引用自：https://stackoverflow.com/questions/727502