jqgrid第1頁x分頁器

Question

我想弄清楚如何使用jqGrid的分頁功能。 目前我卡在第1頁/共4頁。無論我按下Next按鈕還是不按。它只停留在1.

我使用ASP.Net和web服務來填充我的JSON數據。如何從客戶端捕獲事件以填充web服務中的屬性以恢復正確的值？

任何幫助表示讚賞。

Answer 1

如果有人按下「下一步」按鈕，新的請求將發送到服務器。該請求將包含page=2以及，例如，rows=10參數作爲URL的一部分（如果其中一個想要獲取第二頁的下10行）。

您的服務器代碼應讀取此參數併發回相應的數據行。 JSON數據從服務器發回應該像下面

{ 
    "total": "5", 
    "page": "2", 
    "records": "55", 
    "rows" : [ 
    {"id" :"21", "cell" :["cell11", "cell12", "cell13"]}, 
    {"id" :"22", "cell" :["cell21", "cell22", "cell23"]}, 
     ... 
    {"id" :"30", "cell" :["cell31", "cell32", "cell33"]}, 
    ] 
} 

（見http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data）。所以數據必須包含page（page = 2）的正確值。一般情況下，現在您的數據量可能會減少，並且您在頁面編號爲1的位置返回頁碼2.

因此，我建議您當前的服務器代碼不要回饋輸出中正確的值爲page。

已更新：好的傑夫。我在jqgrid setGridParam datatype:local繼續我的回答，併發布如何承諾一個代碼如何做服務器端分頁，排序和搜索（或高級搜索）。

首先在這個例子中，我不會真正實現排序和搜索，只在現在有問題的地方模擬分頁。應該將實際的分頁，排序和搜索作爲相應的SELECT語句實施到存在數據的SQL數據庫。分類遵循ORDER BY，搜索到WHERE並尋呼到如TOP(x),TOP(x)與LEFT OUTER JOIN或ROW_NUMBER() OVER(...)構造的用法的構造。但這些都不是你問題的主題。所以我簡化了所有的數據分頁的簡單模擬。

我開始與ASMX Web方法的代碼：

public JqGridData TestMethod (int page, int rows, string sidx, string sord, 
    bool _search, string searchField, string searchOper, string searchString) { 
    // for advance search use "string filters" instead of the last three parameters 
    int recordsCount = 205; 

    int startIndex = (page - 1) * rows; 
    int endIndex = (startIndex + rows < recordsCount) ? 
        startIndex + rows : recordsCount; 
    List<TableRow> gridRows = new List<TableRow> (rows); 
    for (int i = startIndex; i < endIndex; i++) { 
     gridRows.Add (new TableRow() { 
      id = i, 
      cell = new List<string> (2) { 
       string.Format("Name{0}", i), 
       string.Format("Title{0}", i) 
      } 
     }); 
    } 

    return new JqGridData() { 
     total = (recordsCount + rows - 1)/rows, 
     page = page, 
     records = recordsCount, 
     rows = gridRows 
    }; 
} 

其中類JqGridData和TableRow像以下定義：

public class TableRow { 
    public int id { get; set; } 
    public List<string> cell { get; set; } 
} 
public class JqGridData { 
    public int total { get; set; } 
    public int page { get; set; } 
    public int records { get; set; } 
    public List<TableRow> rows { get; set; } 
} 

我們跳過的TestMethod的輸入參數的任何覈查使代碼示例更具可讀性。

現在的客戶端代碼：

$("#list").jqGrid({ 
    url: './MyTestWS.asmx/TestMethod', 
    datatype: 'json', 
    mtype: 'POST', 
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }, 
    serializeGridData: function (postData) { 
     if (postData.searchField === undefined) postData.searchField = null; 
     if (postData.searchString === undefined) postData.searchString = null; 
     if (postData.searchOper === undefined) postData.searchOper = null; 
     //if (postData.filters === undefined) postData.filters = null; 
     return JSON.stringify(postData); 
    }, 
    jsonReader: { 
     root: function (obj) { return obj.d.rows; }, 
     page: function (obj) { return obj.d.page; }, 
     total: function (obj) { return obj.d.total; }, 
     records: function (obj) { return obj.d.records; } 
    }, 
    // you can also use following more simple form of jsonReader instead: 
    // jsonReader: { root: "d.rows", page: "d.page", total: "d.total", 
    //    records: "d.records", id: "d.names" } 
    colModel: [ 
     { name: 'name', label: 'Name', width: 250 }, 
     { name: 'title', label: 'Title', width: 250 } 
    ], 
    rowNum: 10, 
    rowList: [10, 20, 300], 
    sortname: 'name', 
    sortorder: "asc", 
    pager: "#pager", 
    viewrecords: true, 
    gridview: true, 
    rownumbers: true, 
    height: 250, 
    caption: 'My first grid' 
}).jqGrid('navGrid', '#pager', {edit: false, add: false, del: false, search: true}); 
//    {}, // use default settings for edit 
//    {}, // use default settings for add 
//    {}, // delete instead that del:false we need this 
//    {multipleSearch : true} // enable the advanced searching 
//    ); 

在代碼中，我用同樣的方法就像jqgrid setGridParam datatype:local但serializeGridData函數的代碼是一個有點不同。因爲我們使用POST而不是GET方法從服務器獲取數據網絡方法的所有輸入參數必須始終設置爲。另一方面，jqGrid並不總是參數searchField,searchOper和searchString，但只有在_search=true。例如，在jqGrid的第一次加載時，_search=false和searchField,searchOper和searchString未在postData中定義。要解決這個問題，我們用null初始化未定義的參數。

要實現排序需要使用sidx（排序索引）和sord（排序方向："asc"或"desc"）參數。

要實現搜索需要使用其他參數_search,searchField,searchOpersearchString。

在高級搜索期間，而不是searchField,searchOper,searchString參數必須使用參數filters（請參見注釋行）。數據必須針對JSON解串器進行解碼。所以必須在jqgrid中設置multipleSearch : true。的serializeGridData函數應更換到

serializeGridData: function (postData) { 
    if (postData.filters === undefined) postData.filters = null; 
    return JSON.stringify(postData); 
} 

和紙幅的方法的原型應改爲

public JqGridData TestMethod (int page, int rows, string sidx, string sord, 
    bool _search, string filters) 

到參數filters一個可以使用這種簡單的代碼進行解碼：

if (_search && !String.IsNullOrEmpty (filters)) { 
    JavaScriptSerializer serializer = new JavaScriptSerializer(); 
    jqGridSearchFilter searchFilter = 
     serializer.Deserialize<jqGridSearchFilter> (filters); 
    // use the searchFilter here 
} 

其中類jqGridSearchFilter可以定義如下：

public class jqGridSearchFilterItem { 
    public string field { get; set; } 
    public string op { get; set; } 
    public string data { get; set; } 
} 
public class jqGridSearchFilter { 
    public string groupOp { get; set; } 
    public List<jqGridSearchFilterItem> rules { get; set; } 
} 

我希望這些信息足以讓您實現任何類型的關於ASMX Web方法的jqGrid用法。

我在這裏使用了一個最簡單的數據從服務器發送到客戶端，主數據之外還有另外的id。如果表格中的其中一列是id，則可以稍微減少發送到服務器的數據。有關更多詳細信息，請參見Jqgrid 3.7 does not show rows in internet explorer。

Answer 2

好的我正在回答這個問題，因爲我拿了上面說的奧列格的話，但是明確了他的意思。

我的.ajax調用封裝在一個將postdata作爲參數傳遞的函數中。我找不到關於該參數的任何文檔，但我想也許這就是頁面值被包含的地方。正如你所看到的，我對postdata.page和low做了一個警報，並且看到我獲得了一個值（基於下一個按鈕的點擊）。

所以我在我的webservice中創建了一個名爲page（integer）的參數。

正如一個附註，你從jQuery傳遞一個整數值到你的ASP。淨Web服務這樣的：

data: "{'page':'" + postdata.page + "'}" 

以下是完整的功能：

function processrequest(postdata) { 
alert(postdata.page); 
$(".loading").show(); 
$.ajax({ 
    type: "POST", 
    data: "{'page':'" + postdata.page + "'}", 
    datatype: "json", 
    url: "../webServices/myTestWS.asmx/testMethod", 
    contentType: "application/json; charset-utf-8", 
    complete: function (jsondata, stat) { 
     if (stat == "success") { 
      var thegrid = jQuery("#list")[0]; 
      var jsonObject = (eval("(" + jsondata.responseText + ")")); 
      thegrid.addJSONData(jsonObject.d); 
      $(".loading").hide(); 
     } else { 
      $(".loading").hide(); 
      alert("Error with AJAX callback"); 
     } 
    } 
}); 

}