jqGrid搜索不能用于bootstrap模式

Question

我在bootstrap模式中添加了jqGrid，并在jqgrid中显示了用户列表。点击按钮，我打开模态，显示数据。直到它的工作正常。但每当我尝试使用jqGrid搜索功能时，它都无法正常工作。 搜索文本框，搜索参数全部被禁用且无法搜索。 但是当我在常规页面/视图上添加了jgGrid时，搜索工作正常。

下面是我的jqGrid

jQuery("#jqgrid1").jqGrid({

            url: '@Url.Action("GetUserList", "Class")',
            datatype: "Json",
            height: 'auto',

            colNames: ['Id', '@objLocalizer["Class_FirstName_GridCol"]', '@objLocalizer["Class_LastName_GridCol"]', '@objLocalizer["Class_Email_GridCol"]'],
            colModel: [{
                name: 'Id',
                index: 'Id',
                sortable: false,
                hidden: true
            },
                {
                    name: 'FirstName',
                    index: 'FirstName',
                    sortable: true,
                    sorttype: 'text',
                },
                {
                    name: 'LastName',
                    index: 'LastName',
                    sortable: true,
                    sorttype: 'text',

                },
                {
                    name: 'Email',
                    index: 'Email',
                    sortable: true,
                    sorttype: 'text',

                }],
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: '#pjqgrid1',
            sortname: 'id',
            toolbarfilter: true,
            viewrecords: true,
            sortorder: "asc",
            search: true,
            refresh: true,
            loadonce: true,
            ignoreCase: true,
            gridComplete: function () {
                var ids = jQuery("#jqgrid1").jqGrid('getDataIDs');
                for (var i = 0; i < ids.length; i++) {
                    var cl = ids[i];
                    be = "<button class='btn btn-xs btn-default' data-original-title='Edit Row' onclick=\"jQuery('#jqgrid1').editRow('" + cl + "');\"><i class='fa fa-pencil'></i></button>";
                    se = "<button class='btn btn-xs btn-default' data-original-title='Save Row' onclick=\"jQuery('#jqgrid1').saveRow('" + cl + "');\"><i class='fa fa-save'></i></button>";
                    ca = "<button class='btn btn-xs btn-default' data-original-title='Cancel' onclick=\"jQuery('#jqgrid1').restoreRow('" + cl + "');\"><i class='fa fa-times'></i></button>";

                    jQuery("#jqgrid1").jqGrid('setRowData', ids[i], {
                        act: be + se + ca
                    });
                }
            },
            editurl: "",
            caption: '@objLocalizer["Class_Users_GridHeader"]',
            multiselect: true,
            autowidth: true,
            multipleSearch: true,
            multipleGroup: true,
            showQuery: true,
            onSelectRow: updateIdsOfSelectedRows,

            onSelectAll: function (aRowids, isSelected) {

                var i, count, id;
                for (i = 0, count = aRowids.length; i < count; i++) {
                    id = aRowids[i];
                    updateIdsOfSelectedRows(id, isSelected);
                }
            },

            loadComplete: function () {

                var $this = $(this), i, count;
                for (i = 0, count = idsOfSelectedRows.length; i < count; i++) {
                    $this.jqGrid('setSelection', idsOfSelectedRows[i], false);

                }
            }

        });
        jQuery("#jqgrid1").jqGrid('navGrid', "#pjqgrid1", {
            edit: false,
            add: false,
            del: true
        });

        jQuery('#jqgrid1').jqGrid('setGridWidth', '582');



        // remove classes
        $(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
        $(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default");
        $(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr");
        $(".ui-jqgrid-pager").removeClass("ui-state-default");
        $(".ui-jqgrid").removeClass("ui-widget-content");

        // add classes
        $(".ui-jqgrid-htable").addClass("table table-bordered table-hover");
        $(".ui-jqgrid-btable").addClass("table table-bordered table-striped");

        $(".ui-pg-div").removeClass().addClass("btn btn-sm btn-primary");
        //$(".ui-icon.ui-icon-plus").removeClass().addClass("fa fa-plus");
        $(".ui-icon.ui-icon-pencil").removeClass().removeClass("fa fa-pencil");
        $(".ui-icon.ui-icon-trash").removeClass().addClass("fa fa-trash-o");
        $(".ui-icon.ui-icon-search").removeClass().addClass("fa fa-search");
        $(".ui-icon.ui-icon-refresh").removeClass().addClass("fa fa-refresh");
        $(".ui-icon.ui-icon-disk").removeClass().addClass("fa fa-save").parent(".btn-primary").removeClass("btn-primary").addClass("btn-success");
        $(".ui-icon.ui-icon-cancel").removeClass().addClass("fa fa-times").parent(".btn-primary").removeClass("btn-primary").addClass("btn-danger");

        $(".ui-icon.ui-icon-seek-prev").wrap("<div class='btn btn-sm btn-default'></div>");
        $(".ui-icon.ui-icon-seek-prev").removeClass().addClass("fa fa-backward");

        $(".ui-icon.ui-icon-seek-first").wrap("<div class='btn btn-sm btn-default'></div>");
        $(".ui-icon.ui-icon-seek-first").removeClass().addClass("fa fa-fast-backward");

        $(".ui-icon.ui-icon-seek-next").wrap("<div class='btn btn-sm btn-default'></div>");
        $(".ui-icon.ui-icon-seek-next").removeClass().addClass("fa fa-forward");

        $(".ui-icon.ui-icon-seek-end").wrap("<div class='btn btn-sm btn-default'></div>");
        $(".ui-icon.ui-icon-seek-end").removeClass().addClass("fa fa-fast-forward");



        var bottomPagerDiv = $("div#pjqgrid1")[0];
        //$("#refresh_jqgrid1", bottomPagerDiv).remove();
        $("#jqgrid1_ilcancel", bottomPagerDiv).remove();
        $("#jqgrid1_ilsave", bottomPagerDiv).remove();
        $("#del_jqgrid1", bottomPagerDiv).remove();
        $("#jqgrid1_iledit", bottomPagerDiv).remove();
        $("#jqgrid1_ilsave", bottomPagerDiv).remove();
        //$("#search_jqgrid1", bottomPagerDiv).remove();


        $('#refresh_jqgrid1').attr('title', '@objLocalizer["refreshModal_jqgrid"]');
        $('#search_jqgrid1').attr('title', '@objLocalizer["searchModal_jqgrid"]');

网格绑定在document.Ready函数中完成。

对此有任何帮助表示赞赏！

Answer 1

从jqgrid中删除loadonce