【发布时间】：2017-05-26 02:14:36
【问题描述】：
我在引导模式中添加了 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 函数中完成。
对此的任何帮助表示赞赏！
【问题讨论】：
-
你使用jqGrid的比较奇怪的选项。 您使用（可以使用）哪个版本的 jqGrid 以及来自哪个 jqGrid 分支（free jqGrid、商业Guriddo jqGrid JS 或版本 只有在 Bootstrap modal 中使用它时会出现一些问题，但代码没有。最好提供演示（例如在 JSFiddle 中），它会重现您想要报告的问题。可以修改您的演示以解决问题。
-
@Oleg 我们使用的是 4.5.3 版本。实际上我们直接没有使用 jqGrid 库。我们选择了现成的可用模板/主题，并且我们正在使用 css、js 文件。但这会有所作为吗？我们正在使用这个192.241.236.31/themes/preview/smartadmin/1.8.x/ajax/… 主题
-
jqGrid 4.5.3 是复古版，很久没支持了。 Free jqGrid 与 4.5.3 兼容，但由于它支持 Bootstrap 和 Font ，因此可以大大减少您的代码。请参阅 here 和 the wiki article。只需包含 CSS 文件并添加选项
iconSet: "fontAwesome"和guiStyle: "bootstrap"。您使用的取消按钮，只有在开始编辑后才有意义 -
如果您确实需要一些自定义图标，那么
formatter: "actions"（或更好的template: "actions"）允许使用actionsNavOptions选项。请参见the wiki article 中描述的the demo 和the answer 中描述的another one。因此我建议你升级到免费的 jqGrid 4.13.6 而不是使用 3.5 年前的 4.5.3 版本。 -
我看到你使用了
loadonce: true，那么forceClientSorting: true对你来说可能会很有趣。它允许本地对数据进行排序/过滤，而不是最初在服务器上对其进行排序。您使用multiselect: true，然后其他新选项multiPageSelection: true可能对您有所帮助。 the answer 中描述的 The demo 演示了该功能。它允许在加载时预选一些行，并在分页/排序和过滤上保持选择。只需尝试排序或分页...
标签： jquery twitter-bootstrap jqgrid bootstrap-modal