Question

我有一个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” ，“薪水”：“1000000”，“地址”：“南非”，“MaritalStatus”：“已婚”，“EntityState”：2，“EntityKey”：{“EntitySetName”：“tbl_Details”，“EntityContainerName”：“ JQGridDBEntities “ ”EntityKeyValues“：[{ ”密钥“： ”ID“， ”值“：1}]， ”方法isTemporary“：假}}，{ ”ID“：2 ”姓“： ”唐纳德“，” 名字“：”Duck“，”LastSSN“：”345“，”部门“：”演员“，”年龄“：”98“，”薪水“：”2000000“，”地址“：”美国“，”MaritalStatus“：空， “EntityState”：2 “的EntityKey”：{ “EntitySetName”： “tbl_Details”， “EntityContainerName”： “JQGridDBEntities”， “EntityKeyValues”：[{ “密钥”： “ID”， “值”：2}] “方法isTemporary”：假}}，{ “ID”：3 “姓”： “Virat”， “名字”： “科利”， “LastSSN”： “111”， “部”： “击球手”，“年龄“：”28“，”薪水“：”1000000“，”地址“：”印度“，”MaritalStatus“：”未知“，”EntityState“：2，”EntityKey“：{”EntitySetName“：”tbl_Details“，” EntityContainerName “：” JQGridDBEntities “ ”EntityKeyValues“：[{ ”密钥“： ”ID“， ”值“：3}]，” IsTemp的卵巢 “：假}}，{” ID “：4”，姓 “：” MS”， “名字”： “纵帆船”， “LastSSN”： “112”， “部”： “船长”， “年龄”： “31”，“薪水”：“9000000”，“地址”：“印度”，“MaritalStatus”：“已婚”，“EntityState”：2，“EntityKey”：{“EntitySetName”：“tbl_Details”，“EntityContainerName” ： “JQGridDBEntities”， “EntityKeyValues”：[{ “密钥”： “ID”， “值”：4}]， “方法isTemporary”：假}}，{ “ID”：5 “姓”： “萨钦”， “姓氏”：“Tendulkar”，“LastSSN”：“113”，“部门”：“超人”，“年龄”：“40”，“薪水”：“90000000”，“地址”：“印度”，“MaritalStatus “：”已婚“，”EntityState“：2，”EntityKey“：{”EntitySetName“：”tbl_Details“，”EntityContainerName“：”JQGridDBEntities“，”EntityKeyValues“：[{”Key“：”ID“，”Value“ ：5}]， “方法isTemporary”：假}}，{ “ID”：6， “姓”： “Virendra”， “名字”： “施瓦格”， “LastSSN”： “114”， “部”：“击球手“，”年龄“：”36“，”薪水“：”8000000“，”地址“：”印度“，”MaritalStatus“：”已婚“，”EntityState“：2，”EntityKey“：{”EntitySetName“：” tbl_Details”， “EntityContainerName”： “JQGridDBEntities”， “EntityKeyValues”：[{ “重点”： “ID”， “值”：6}]， “方法isTemporary”：假}}，{ “ID”：7， “姓”： “Zaheer这样”， “名字”： “汗”， “LastSSN”： “115” ，“部门”：“保龄球”，“年龄”：“36”，“薪水”：“3000000”，“地址”：“印度”，“MaritalStatus”：“已婚”，“实体状态”：2，“EntityKey” ：{ “EntitySetName”： “tbl_Details”， “EntityContainerName”： “JQGridDBEntities”， “EntityKeyValues”：[{ “密钥”： “ID”， “值”：7}]， “方法isTemporary”：假}}，{” 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“： [{ “键”： “ID”， “值”：8}]， “方法isTemporary”：假}}，{ “ID”：9 “姓”： “演示”， “名字”： “演示”，” LastSSN“：”Demo“，”Department“：”Demo“，”Age“：”Demo“，”Salary“：”Demo“，”Address“：”Demo“，”MaritalStatus“：”Demo“，”EntityState“ ：2 “的EntityKey”：{ “EntitySetName”： “tbl_Details”， “EntityContainerName”： “JQGridDBEntities”， “EntityKeyValues”：[{ “密钥”： “ID”， “值”：9}]， “方法isTemporary”：假}}，{ “ID”：10， “姓”： “演示”， “名字”： “演示”， “LastSSN” ：“Demo”，“Department”：“Demo”，“Age”：“Demo”，“Salary”：“Demo”，“Address”：“Demo”，“MaritalStatus”：“Demo”，“EntityState”：2 “的EntityKey”：{ “EntitySetName”： “tbl_Details”， “EntityContainerName”： “JQGridDBEntities”， “EntityKeyValues”：[{ “密钥”： “ID”， “值”：10}]， “方法isTemporary”：假} }]

Answer 1

我认为jqGrid如何运作存在误解。如果您不使用loadonce: true选项jqGrid，请向url发送自动请求，并附加指定页面大小和请求页面的参数。因此，您不需要任何$.ajax，并且您不需要绑定$(".ui-pg-input").click。基于1的“页码”参数的默认名称为page，“行大小”参数的名称为rows。因此，您只需重命名Records操作的参数。

或者，您可以使用jqGrid的prmNames选项（请参阅the documentation）通知jqGrid将其他参数名称用作默认page和rows。例如，您可以添加选项

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

解决您的问题。

如何在JQGRID中应用自定义分页

1 个答案: