2017-01-11 12 views
0

jqGridをブートストラップモーダルに追加し、ユーザーリストをjqgridに追加しました。ボタンをクリックするとモーダルが開き、データが表示されます。これまでは正常に機能しています。しかし、私がjqGrid検索機能を使用しようとすると、その機能は動作しません。 検索テキストボックス、検索パラメータはすべて無効になっており、検索できません。 しかし、通常のページ/ビューにjgGridを追加しても、検索は正常に動作しています。jqGrid検索がブートストラップモーダルで機能していません

は以下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"]'); 

です。

この点に関するお役に立ちましたか?

+1

比較的奇妙なjqGridのオプションを使用します。 **あなたが使用する(使用できる)jqGridのバージョンと、jqGrid **([free jqGrid](https://github.com/free-jqgrid/jqGrid)、商用[Guriddo jqGrid JS](http: //guriddo.net/?page_id=103334)またはバージョン<= 4.7の古いjqGrid?) Bootstrapのmodal *の中で使用する場合にのみ問題があると書いてありますが、コードはありません。あなたが報告したい問題を再現するデモを(例えばJSFiddleで)提供する方が良いです。デモを修正して問題を解決することができます。 – Oleg

+0

@Olegバージョン4.5.3を使用しています。実際には、jqGridライブラリを直接使用していません。私たちは準備が整った利用可能なテンプレート/テーマを選択し、そこにCSS、jsファイルを使用しています。しかし、これは違いを生み出すだろうか?我々はこれを使用していますhttp://192.241.236.31/themes/preview/smartadmin/1.8.x/ajax/index.html#ajax/jqgrid.htmlテーマ – Rohit

+2

jqGrid 4.5.3はレトロバージョンです。たくさんの時間。 [Free jqGrid](https://github.com/free-jqgrid/jqGrid)は4.5.3と互換性がありますが、BootstrapとFontをサポートしているため、コードを大幅に減らすことができます。 [here](https://free-jqgrid.github.io/getting-started/index.html#bootstrap)と[wiki記事](https://github.com/free-jqgrid/jqGrid/wiki/)を参照してください。 Using-Font-Awesome-in-free-jqGrid-4.8)。 CSSファイルをインクルードし、オプション 'iconSet:" fontAwesome "と' guiStyle: "ブートストラップ"を追加するだけでよい。あなたが使用しているキャンセルボタンは、編集を開始した後でなければ意味がありません。 – Oleg

答えて

0

jqgridからloadonceを削除します。

+0

いいえ、それは動作していない! – Rohit

関連する問題