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"]');
です。
この点に関するお役に立ちましたか?
比較的奇妙な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
@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
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