6


6

jqgridページ1のxページャー

jqGridのページング機能をどのように使用するかを理解しようとしています。 現在、私は4ページ中1ページで立ち往生しています。 [次へ]ボタンを押すかどうかは関係ありません。 1のままです。

ASP.NetとWebサービスを使用してJSONデータを入力しています。 クライアントからイベントをキャプチャしてWebサービスのプロパティに入力し、正しい値を戻すにはどうすればよいですか?

任意の助けは大歓迎です。

2 Answer


17


「次へ」ボタンを押すと、新しいリクエストがサーバーに送信されます。 リクエストには、URLの一部として「page = 2」と、例えば「rows = 10」パラメーターが含まれます(2番目のページの次の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 = 2)。 一般に、以前よりもデータが少なくなり、ページ番号2を取得するリクエストでページ番号1を返すことが可能になりました。

そのため、現在のサーバーコードでは、出力の「ページ」の正しい値を返さないことをお勧めします。

更新:OK、ジェフ。 jqgrid setGridParam datatype:localで答えを続け、サーバー側のページング、ソート、検索を行う方法を約束したコードを投稿します(または高度な検索)。

まず、この例では、ソートと検索を実際には実装せず、現在問題があるページングのみをシミュレートします。 実際のページング、ソート、および検索は、データが存在するSQLデータベースに対応する「SELECT」ステートメントとして実装する必要があります。 ソートは、「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 gridRows = new List (rows);
    for (int i = startIndex; i < endIndex; i++) {
        gridRows.Add (new TableRow () {
            id = i,
            cell = new List (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 cell { get; set; }
}
public class JqGridData {
    public int total { get; set; }
    public int page { get; set; }
    public int records { get; set; }
    public List 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
//                );

コードではhttps://stackoverflow.com/questions/3169408/jqgrid-setgridparam-datatypelocal/3170652#3170652[jqgrid setGridParam datatype:local]のような同じ手法を使用しますが、「serializeGridData」関数のコードは少し異なります。 GETメソッドではなくPOSTを使用してサーバーからデータを取得するため、* Webメソッドのすべての入力パラメーターは常に設定する必要があります*。 一方、jqGridは常にパラメーター searchField、` searchOper`、および searchString`を設定するわけではなく、 _search = true`の場合のみ設定します。 たとえば、jqGridの最初のロードでは、 _search = false`と searchField`、 searchOper`と searchString`は `postData`で定義されていません。 この問題を修正するには、未定義のパラメーターを「null」で初期化します。

ソートを実装するには、 sidx(ソートインデックス)および` sord`(ソート方向: " asc "`または `" desc ")パラメータを使用する必要があります。

検索を実装するには、他のパラメーター「_search」、「searchField」、「searchOper」、「searchString」を使用する必要があります。

searchField、` searchOper`、 searchString`パラメーターの代わりに高度な検索を行う場合、パラメーター filters`を使用する必要があります(コメント行を参照)。 JSONデシリアライザーに関してデータをデコードする必要があります。 したがって、jqgridで `multipleSearch:true`を設定する必要があります。 `serializeGridData`関数は、

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

また、Webメソッドのプロトタイプを次のように変更する必要があります

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 (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 rules { get; set; }
}

この情報が、ASMX Web Methodに関してjqGridのあらゆる種類の使用を実装するのに十分であることを願っています。

ここでは、メインデータの外部に追加の「id」を付けて、サーバーからクライアントに送信する最も単純なデータを使用しました。 テーブルにある列の1つが「id」である場合、サーバーに送信されるデータを少し減らすことができます。 詳細については、https://stackoverflow.com/questions/3054463/jqgrid-3-7-does-not-show-rows-in-internet-explorer/3061669#3061669 [Jqgrid 3.7は行をInternet Explorerに表示しない]を参照してください。 。


0


さて、オレグが言ったことを取り上げたが、彼が何を意味していたかを正確に理解したので、私はこれに答えている。

私の.ajax呼び出しは、postdataをパラメーターとして渡す関数にラップされています。 そのパラメーターに関するドキュメントは見つかりませんでしたが、ページの値が含まれている場所だと思いました。 ご覧のとおり、私はpostdata.pageとlowでアラートを実行し、値を取得しました(次のボタンのクリックに基づいて)。

そこで、Webサービスにpage(整数)というパラメーターを作成しました。

追記として、次のようにjQueryからASP.Net 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");
        }
    }
});

}