1

我有一个 Jqgrid，在我的 MVC 视图中，在网格中显示数据没有问题。但是我想在网格中应用自定义分页，所以我在我的控制器中创建了一个方法，它接受两个参数（pageNumber 和 rowSize）并根据这两个参数返回数据。 现在我的问题是我如何将网格的这两个属性发送到控制器并让更改反映在网格上。

注意：我还尝试在单击按钮时使用 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","Address":"南非","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","地址":"印度","MaritalStatus":"未知","EntityState": 2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":3}],"IsTemporary":false}},{"ID":4,"FirstName":"MS","LastName ":"Dhoni","LastSSN":"112","Department":"Captain","Age":"31","Salary":"9000000","Address":"India","MaritalStatus": "已婚","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":4 }],"IsTemporary":false}},{"ID":5,"FirstName":"Sachin","LastName":"Tendulkar","LastSSN":"113","Department":"Superman","Age":"40","Salary":"90000000","Address":"India","MaritalStatus":"Married","EntityState ":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 ","Salary":"8000000 ","Address":"India","MaritalStatus":"已婚 ","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":[{"Key":"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":[{"Key":"ID","Value":10}],"IsTemporary":false}}]

4

1 回答 1

2

我认为对 jqGrid 的工作方式存在误解。如果您不使用loadonce: true选项 jqGrid自动发送请求，url并带有指定页面大小和请求页面的附加参数。所以你不需要很多$.ajax，也不需要绑定$(".ui-pg-input").click。从 1 开始的“页码”参数的默认名称是page，“行大小”参数的名称是rows。所以你只需要重命名Records动作的参数。

或者，您可以使用prmNamesjqGrid 的选项（请参阅文档）来通知 jqGrid 使用其他参数名称作为默认值page和rows. 例如，您可以添加选项

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

来解决你的问题。

于 2013-10-18T08:31:47.970 回答