Search jqGrid-更改筛选/搜索弹出表单-使页面平坦-不是对话框

我正在使用jqgrid

我真的需要帮助，但我不知道怎么做，但我相信这是可能的。。。有人能给我一个部分的答案吗？我们从哪里开始

我现在有一个要求，就是为了搜索和过滤网格，我不希望常规模型表单弹出窗口打开，相反，当进入页面时，过滤器应该打开，但不是作为弹出表单打开，但应该位于页面顶部，但仍然具有所有功能

需要如下所示：

再次，让select标签像在弹出表单中一样填写正确的信息，当单击Save时，它应该像常规一样将请求发送到服务器

这可能吗

*******编辑*******

---

我唯一基本上需要的是让过滤器不包含对话框部分。

您可以找到的旧搜索对话框的问题解决方案。我将演示修改为jqGrid中搜索对话框的当前实现

您可以在以下网站上看到结果：

相应代码如下：

var$grid=$'list'； //创建网格 $grid.jqGrid{ //jqGrid操作 }; //集搜索deafuls $.extend$.jgrid.search，{multipleSearch:true，multipleGroup:true，overlay:0}； //在创建nevigator栏的过程中，可选按钮不需要包含搜索按钮 $grid.jqGrid'navGrid'，'pager'，{add:false，edit:false，del:false，search:false}； //创建搜索对话框 $grid.jqGrid'searchGrid'； var gridSelector=$.jgrid.jqID$grid[0].id，//“list” $searchDialog=$searchmodfbox\uuz+gridSelector， $gbox=$gbox\uux+gridSelector； //隐藏searchring对话框的“关闭”按钮 $searchDialog.finda.ui-jqdialog-titlebar-close.hide； //将“搜索”对话框放置在网格上方 $searchDialog.insertBefore$gbox； $searchDialog.css{position:relative，zIndex:auto，float:left} $gbox.css{clear:left}；

---

下面是我使用Oleg的优秀帮助实现它的方法

我希望我的用户能够立即键入搜索条件（在本例中为用户名），并让jqGrid显示结果。不要乱动弹出的搜索对话框

以下是我的最终结果：

为此，我需要以下HTML：

Employee name:
<input type="text" name="employeeName" id="employeeName" style="width:250px" />

<!--  This will be my jqGrid control and pager -->
<table id="tblEmployees"></table>
<div id="pager"></div>

这个JavaScript：

$("#employeeName").on('change keyup paste', function () {
    SearchByEmployeeName();
});

function SearchByEmployeeName()
{
    //  Fetch the text from our <input> control
    var searchString = $("#employeeName").val();

    //  Prepare to pass a new search filter to our jqGrid
    var f = { groupOp: "AND", rules: [] };

    //  Remember to change the following line to reflect the jqGrid column you want to search for your string in
    //  In this example, I'm searching through the UserName column.

    f.rules.push({ field: "UserName", op: "cn", data: searchString });

    var grid = $('#tblEmployees');
    grid[0].p.search = f.rules.length > 0;
    $.extend(grid[0].p.postData, { filters: JSON.stringify(f) });
    grid.trigger("reloadGrid", [{ page: 1 }]);
}

再次感谢Oleg展示了如何使用这些搜索过滤器

---

它真的让jqGrid更加用户友好。

@Oleg，你能帮我一下吗？像你以前多次那样帮助我？？我收到了上面的信息。如果你将来想给我发信息，你应该把它贴在我写答案或评论的任何页面上。只有在这种情况下，我才会收到有关邮件的通知。好的，谢谢，我下次会知道…一个问题，第一次搜索后，对话框关闭，我需要它一直保持打开状态。。。我该怎么做？我在您的演示中看到它一直处于打开状态，我做错了什么？还有一种方法是，选择“和”或“或”选项不会出现在那里，默认情况下，当有几个过滤器时，它总是会出现吗？@Ovi:您的第一个问题是关于关闭对话框。您使用哪些设置？在我的演示中，我使用了默认设置closeAfterSearch:false、closeAfterReset:false，并将对话框的关闭按钮设置为隐藏。所以我不明白如何关闭对话框。下一个问题。colModel中的每一列都可以有search:false选项。关于和或选项的最后一个问题：可以使用$searchDialog.findselect.opsel.hide；隐藏“使用添加/或选择”操作。现在我隐藏了和/或，单击+或-添加其他规则后，它再次出现。我能做些什么来保持隐藏？如果你试图使用一些标准对话框而不是编写自己的对话框，这是个问题，但是你想在标准对话框中有很多自定义项。一种方法是尝试隐藏回调中的添加/或按钮。在+/-按钮上定义自定义事件处理程序的另一种方法。您可以选择另一种方式创建自定义输入字段：请参阅以获取详细信息。Hi@Mike。此解决方案非常有效，但如果我们加载所有1000条记录而不分页，则筛选将无法按预期正常工作。对此有何建议？我已将rowNum:-1设置为一次加载所有记录。在这种情况下，筛选无法正常工作。