可以让 jqGrid 搜索框留在页面上吗？答案

【问题标题】：Possible to make jqGrid Search Box Stay on Page?可以让 jqGrid 搜索框留在页面上吗？
【发布时间】：2011-08-06 23:40:14
【问题描述】：

现在，我必须单击 jqGrid 搜索图标以弹出搜索框。我想做的是始终在网格上方打开搜索框（而不是弹出窗口）。我在他们的演示中没有看到任何东西，但我希望有人已经做到或知道如何做到。

【问题讨论】：

toolbar searching 可能更好？您需要什么样的搜索？你使用 4.0.0 版本的 jqGrid 有新的风格搜索吗？一个人可以实现你想要的，但我不确定你最后的意思是另一回事。在大多数情况下，我在网格中包含两个搜索：用于快速直观搜索的工具栏和 advanced searching 用于构建更复杂的过滤器。
我们正在使用 jqGrid 3.8.2 高级搜索。工具栏搜索不允许我们为同一列提供范围（我不相信），否则，这可能是正确的方法。

标签： javascript search jqgrid

【解决方案1】：

做你需要的最简单的方法是

var grid = $("#list"),
    prmSearch = {multipleSearch:true,overlay:false};

grid.jqGrid({
    // all jqGrid parameters
});

// next line is optional
grid.jqGrid('navGrid','#pager',
            {add:false,edit:false,del:false,search:true,refresh:true},
            {},{},{},prmSearch);

// create the searching dialog
grid.searchGrid(prmSearch);

// find the div which contain the searching dialog
var searchDialog = $("#fbox_"+grid[0].id);

// make the searching dialog non-popup
searchDialog.css({position:"relative", "z-index":"auto"});

您可以实时查看结果here。要消除搜索对话框和网格的边框，您还可以执行以下操作：

searchDialog.addClass("ui-jqgrid ui-widget ui-widget-content ui-corner-all");
searchDialog.css({position:"relative", "z-index":"auto", float:"left"})
var gbox = $("#gbox_"+grid[0].id);
gbox.before(searchDialog);
gbox.css({clear:"left"});

它将搜索对话框移到“gbox_list”div之外。

你可以看到here的最终解决方案。

【讨论】：

在这种情况下onSearch 不会被调用
@Hunt：我不确定你的意思。我的回答中的演示使用 jqGrid 3.8.2。过滤模块稍后会完全重写。因此，如果您使用当前版本的 jqGrid，则必须使用其他代码。例如来自here。当前版本的 jqGrid 在搜索模块中有更多的变化。无论如何，如果您遇到无法调用 onSearch 的问题，您应该将 URL 发布到相应的演示。
我有一个 4.4.5 jqGrid。我同时使用工具栏搜索和弹出对话框。我已经稍微定制了顶部标题区域中的图标，并且正在寻找如何从我的自定义图标启动 fbox_ 搜索对话框
@bkwdesign：例如见another answer。

【解决方案2】：

这是我的 jqgrid > 4.3 的固定版本

var searchDialog = $("#searchmodfbox_"+grid[0].id);    
    searchDialog.addClass("ui-jqgrid ui-widget ui-widget-content ui-corner-all");
    searchDialog.css({position:"relative", "z-index":"auto", "float":"left"})    
    var gbox = $("#gbox_"+grid[0].id);
    gbox.before(searchDialog);
    gbox.css({clear:"left"});

【讨论】：

【解决方案3】：

这是最简单的方法，可以帮助某人让 jq 网格搜索框一直停留在页面上（作为弹出窗口），直到单击关闭。

$("#grid").searchGrid({ closeAfterSearch: false } );
$("#grid").searchGrid({ closeOnEscape: false } );

【讨论】：