1

私は Jqgrid を持っています。私の MVC ビューでは、グリッドにデータを表示することに問題はありません。しかし、グリッドにカスタム ページングを適用したいので、2 つのパラメーター (pageNumber と rowSize) を受け取り、これら 2 つのパラメーターに基づいてデータを返すメソッドをコントローラーに作成しました。 ここで私の質問は、グリッドのこれら 2 つのプロパティをコントローラーに送信し、変更をグリッドに反映するにはどうすればよいかということです。

注:ボタンのクリック時にajaxを使用してrowSizeの値を送信しようとしましたが、サーバーでコードを実行した後、グリッドに変更はありません(予想どおり)。

意見：

<table id="jQGridDemo">
</table>
<div id="jQGridDemoPager">
</div>
<script type="text/javascript">
    jQuery("#jQGridDemo").jqGrid({

        datatype: "json",
        colNames: ['Id', 'First Name', 'Last Name', 'Last 4 SSN', 'Department',
                'Age', 'Salary', "Address", 'Marital Status'],
        colModel: [
                 { name: 'ID', index: '_id', width: 20, stype: 'text' },
                 { name: 'FirstName', index: 'FirstName', width: 150 },
                 { name: 'LastName', index: 'LastName', width: 150 },
                 { name: 'LastSSN', index: 'LastSSN', width: 100 },
                 { name: 'Department', index: 'Department', width: 80, align: "right" },
                 { name: 'Age', index: 'Salary', width: 80, align: "right" },
                 { name: 'Salary', index: 'Salary', width: 80, align: "right" },
                 { name: 'Address', index: 'Address', width: 150, sortable: false },
                 { name: 'MaritalStatus', index: 'MaritalStatus', width: 100, sortable: false }
               ],
        rowNum: 10,
        loadonce: false,
        rowList: [5, 10, 20, 50],
        pager: "#jQGridDemoPager",
        height: "100%",
        sortname: 'ID',
        viewrecords: true,
        sortorder: "desc",
        caption: "List Employee Details",
        url: '/Home/Records'
    });

    $(".ui-pg-input").click(function () {

        alert(this.value);
        $.ajax({
            type: 'POST',
            url: window.location + "Home/Records",
            data: {
                pageNumber: this.value
            },
            success: function (data) {
                alert("ajax call completed");
            },
            error: function () {
                alert("Something went Wrong");
            }
        });
    })
</script>

コントローラ

 public JsonResult Records(int pageNumber=3, int rowSize = 5)
 {
     // code for custom paging
     return json;
 }

サーバーから返された JSON:

[{"ID":1,"FirstName":"Alan","LastName":"Donald","LastSSN":"123","Department":"Bowler","Age":"44 ","Salary ":"1000000 ","住所":"南アフリカ","MaritalStatus":"既婚 ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities", "EntityKeyValues":[{"Key":"ID","Value":1}],"IsTemporary":false}},{"ID":2,"FirstName":"Donald","LastName":" Duck","LastSSN":"345","部署":"俳優","年齢":"98","給与":"2000000 ","Address":"USA","MaritalStatus":null,"EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[ {"Key":"ID","Value":2}],"IsTemporary":false}},{"ID":3,"FirstName":"Virat","LastName":"Kohli","LastSSN ":"111","部署":"バットマン","年齢":"28","給与":"1000000","住所":"インド","婚姻状況":"不明","エンティティの状態": 2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"キー":"ID","値":3}],"IsTemporary":false}},{"ID":4,"名":"MS","姓":"Dhoni","LastSSN":"112","Department":"Captain","Age":"31 ","Salary":"9000000 ","Address":"India","MaritalStatus": "Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":4 }],"IsTemporary":false}},{"ID":5,"FirstName":"Sachin","LastName":"Tendulkar","LastSSN":"113","部署":"スーパーマン","年齢":"40","給与":"90000000","住所":"インド","婚姻状況":"既婚","エンティティの状態":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":5}],"IsTemporary" :false}},{"ID":6,"FirstName":"Virendra","LastName":"Sehwag","LastSSN":"114","Department":"Batsman","Age":"36 ","給与":"8000000 ","住所":"インド","婚姻状況":"","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":6} ],"IsTemporary":false}},{"ID":7,"FirstName":"Zaheer","LastName":"Khan","LastSSN":"115","Department":"Bowler"," Age":"36 ","Salary":"3000000 ","Address":"India","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details", "EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"キー":"ID","Value":7}],"IsTemporary":false}},{"ID":8,"FirstName":"Demo","LastName":"Demo","LastSSN":"Demo","Department" :"Demo","Age":"Demo ","Salary":"Demo ","Address":"Demo","MaritalStatus":"Demo ","EntityState":2,"EntityKey":{"EntitySetName ":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":8}],"IsTemporary":false}},{"ID":9 ,"FirstName":"Demo","LastName":"Demo","LastSSN":"Demo","Department":"Demo","Age":"Demo ","Salary":"Demo ","Address":"Demo","MaritalStatus":"Demo ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName" :"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":9}],"IsTemporary":false}},{"ID":10,"FirstName":"Demo", "LastName":"Demo","LastSSN":"Demo","Department":"Demo","Age":"Demo ","Salary":"Demo ","Address":"Demo","MaritalStatus ":"デモ ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"キー":"ID","値":10}],"IsTemporary":false}}]

4

1 に答える 1

2

jqGrid の仕組みについて誤解があると思います。loadonce: trueオプション jqGrid を使用しない場合、ページ サイズと要求されたページを指定する追加のパラメーターを使用して要求が自動的に送信されます。urlしたがって、多くの必要$.ajaxはなく、バインドする必要もありません$(".ui-pg-input").click。1 から始まる「ページ番号」パラメータのデフォルト名は でpage、「行サイズ」パラメータの名前は ですrows。Recordsしたがって、アクションのパラメーターの名前を変更するだけです。

prmNamesまたは、jqGrid のオプションを使用して (ドキュメントを参照)、他のパラメーター名をデフォルトとして使用するよう jqGrid に通知することもできpageますrows。たとえば、オプションを追加できます

prmNames: {page: "pageNumber", rows: "rowSize"}

あなたの問題を解決するために。

于 2013-10-18T08:31:47.970 に答える