Question

我在asp.net mvc2项目中使用了jQGrid来填充用户详细信息。在jQGrid的pager部分，我有一个Search and Refresh按钮。单击“搜索”按钮，将打开一个包含少量文本框控件的弹出窗口。现在，用户在文本框中输入数据，根据该文本框执行搜索操作。搜索完成后，搜索弹出窗口将关闭，然后数据将填充到jQGrid中。

现在假设基于上述搜索条件，jQGrid中填充了40条记录，每页包含10条记录。所以现在我们共有4页。现在，当我导航到第二页时，我发现根据搜索条件不会保留总记录数和总页数。在分析中，我发现在搜索操作中没有维护postdata。

我使用以下代码：

users.js：

function usersInit(getAllUsers,page,sord,rows) {
    $('#users-list').jqGrid(
        {
            url: getAllUsers + "?random=" + Math.random(),
            datatype: 'json',
            mtype: 'GET',
            postData:
            {
                filters: function () {
                    return $.toJSON([
                                    { Key: "FirstName", Value: $.trim($("[name='txtFirstName']").val()) },
                                    { Key: "LastName", Value: $.trim($("[name='txtLastName']").val()) },
                                    { Key: "Login", Value: $.trim($("[name='txtLogin']").val()) },
                                    { Key: "Organization", Value: $.trim($("[name='txtOrganization']").val()) }
                                    ]);
                }
            },
            colNames: ['UserID', 'Login', 'IsRootUser', 'CreationDate', 'IsActive', 'FirstName', 'LastName', 'Organization', 'UserType', 'EmailAddress'],
            colModel: [
                            { name: 'UserID', index: 'UserID', hidden: true },
                            { name: 'Login', index: 'Login', width: 150 },
                            { name: 'IsRootUser', index: 'IsRootUser', search: false, width: 100, align: 'center' },
                            { name: 'CreationDate', index: 'CreationDate', search: false, width: 100, align: 'left' },
                            { name: 'IsActive', index: 'IsActive', search: false, width: 100, align: 'center' },
                            { name: 'FirstName', index: 'FirstName', search: false, width: 150, align: 'center' },
                            { name: 'LastName', index: 'LastName', search: false, width: 150, align: 'center' },
                            { name: 'Organization', index: 'Organization', search: false, width: 100, align: 'center' },
                            { name: 'UserType', index: 'UserType', search: false, width: 100, align: 'center' },
                            { name: 'EmailAddress', index: 'EmailAddress', search: false, width: 140, align: 'center' }
                      ],
            autowidth: false,
            sortname: 'Login',
            //sortorder: 'asc',
            sortorder: sord,
            rowNum:rows,
            page:page,
            width: "1100",
            height: "auto",
            viewrecords: true,
            pager: '#users-list-pager',
            loadui: 'block',
            loadError: function (xhr, status) {
                location.reload();
            }
        });

    $('#users-list').jqGrid('navGrid', '#users-list-pager', { add: false, del: false, search: false, view: false, edit: false, refresh: false })
    // Search Details 
        .navButtonAdd("#users-list-pager", {
            id: "btn-search-user",
            caption: "Search User",
            buttonicon: "ui-icon-search",
            onClickButton: function () {
                SearchUserDialog()
            .dialog('option', 'title', 'Search User')
            .dialog('open');
            }
        });

    // Refresh Details
    $("#users-list").jqGrid('navButtonAdd', "#users-list-pager", {
        caption: "Refresh", title: "Reload Grid", buttonicon: "ui-icon-refresh",
        onClickButton: function () {
            $('#users-list').jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
        }
    });

    // Search dialog
    var SearchUserDialog = function () {
        return $("#user-search-dialog").dialog({
            resizable: false,
            autoOpen: false,
            modal: true,
            height: 235,
            width: 480,
            buttons: {
                "Cancel": function () {
                    $(this).dialog('close');
                },
                "Search": function () {
                    // Get all the user details
                    var firstName = $.trim($("[name='txtFirstName']").val());
                    var lastName = $.trim($("[name='txtLastName']").val());
                    var loginName = $.trim($("[name='txtLogin']").val());
                    var organization = $.trim($("[name='txtOrganization']").val());

                    if (ValidateUserDetails(firstName, lastName, loginName, organization)) {
                        $("#users-list").trigger("reloadGrid");
                        $(this).dialog('close');
                    }
                }
            },
            close: function () {
                $('#user-search-dialog-form').each(function () {
                    this.reset();
                });
            },
            open: function () {
                $("[name='txtFirstName']").focus();
            }
        });
    }
}
function ValidateUserDetails(firstName, lastName, loginName, organization) {
    var isValidSearch = true;
    var errorMessage = '';

    if ((firstName.length === 0) && (lastName.length === 0) && (loginName.length === 0) && (organization.length === 0)) {
        //$("<div title='Alert'>" + " Please enter value for at least one of the input parameters.\n" + errorMessage + "</div>").dialog();
        alert('Please enter values for at least one of the input parameters :<br/> <ul><li>First Name</li><li>Last Name</li><li>Login</li><li>Organization</li></ul>');
        isValidSearch = false;
    }
    return isValidSearch;
}

任何人都可以帮助我了解在搜索弹出框的打开和关闭事件期间维护postdata的最佳解决方案吗？

谢谢＆amp;问候， Santosh Kumar Patro

Answer 1

我分析了这个问题，发现由于以下代码，文本框的值不会持续存在：

close: function () {
                $('#user-search-dialog-form').each(function () {
                    this.reset();
                });
            },

反过来又重置postData值并导致维护分页的问题。

谢谢＆amp;问候， Santosh Kumar Patro

保留jqGrid的postdata的最佳方法是什么？

1 个答案: