jqGrid 검색이 부트 스트랩 모달에서 작동하지 않습니다.

Question

부트 스트랩 모달에 jqGrid를 추가하고 jqgrid에 표시된 사용자 목록을 추가했습니다. 버튼을 클릭하면 모달이 열리고 데이터가 표시됩니다. 이것까지는 잘 작동합니다. 하지만 jqGrid 검색 기능을 사용하려고 할 때마다 작동하지 않습니다. 검색 텍스트 상자, 검색 매개 변수가 모두 비활성화되어 검색 할 수 없습니다. 그러나 일반 페이지 /보기에 jgGrid를 추가하면 검색이 정상적으로 작동합니다.

다음은 document.Ready 기능에서 수행 바인딩 그리드 내있는 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"]'); 

입니다.

감사합니다!

Answer 1

jqgrid에서 loadonce 제거