jqGrid - 更改过滤器/搜索弹出表单 - 在页面上平展 - 不是对话框

Posted 2023-02-23

【中文标题】jqGrid - 更改过滤器/搜索弹出表单 - 在页面上平展 - 不是对话框

【英文标题】：jqGrid - Change filter/search pop up form - to be flat on page - not a dialog

【发布时间】：2012-02-08 13:34:01

【问题描述】：

我正在使用 jqgrid。

我真的需要这方面的帮助，并且不知道该怎么做，但我相信它可能......任何人都可以给我一个部分答案吗？是从哪里开始的？

我现在有一个要求，说对于搜索和过滤网格，我不希望打开常规模型表单弹出操作，而是在进入页面时应该打开过滤器，而不是作为弹出表单，但应该打开页面顶部，但仍然具有所有功能。

需要看起来像这样：

再次让选择标签填充正确的信息（就像他们在弹出表单中所做的那样），当点击“保存”时，它应该像常规一样将请求发送到服务器。

这可能吗？

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

我基本上唯一需要的就是让过滤器没有对话框部分。

【问题讨论】：

@Oleg，你能帮帮忙吗？像你以前那样帮助我吗？？

我收到了类似上面的消息。如果您以后想给我发消息，您应该将其发布在我写答案或评论的任何页面上。只有在我收到消息通知的情况下。

好的，谢谢，下次知道...

【参考方案1】：

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

你可以在the demo看到结果：

对应的代码如下：

var $grid = $('#list');

// create the grid
$grid.jqGrid(
    // jqGrid opetions
);

// set searching deafauls
$.extend($.jgrid.search, multipleSearch: true, multipleGroup: true, overlay: 0);

// during creating nevigator bar (optional) one don't need include searching button
$grid.jqGrid('navGrid', '#pager', add: false, edit: false, del: false, search: false);

// create the searching dialog
$grid.jqGrid('searchGrid');

var gridSelector = $.jgrid.jqID($grid[0].id), // 'list'
    $searchDialog = $("#searchmodfbox_" + gridSelector),
    $gbox = $("#gbox_" + gridSelector);

// hide 'close' button of the searchring dialog
$searchDialog.find("a.ui-jqdialog-titlebar-close").hide();

// place the searching dialog above the grid
$searchDialog.insertBefore($gbox);
$searchDialog.css(position: "relative", zIndex: "auto", float: "left")
$gbox.css(clear:"left");

【讨论】：

一个问题，第一次搜索后，对话框关闭，我需要它一直保持打开状态......我该怎么做？我在您的演示中看到它保持打开状态，我做错了什么？

还有一种方法可以让我们不选择“and”或“or”选项，默认情况下它总是会这样做，并且当有几个过滤器时？

@Ovi：您的第一个问题是关于关闭对话框。您使用哪些设置？在我的演示中，我使用默认设置closeAfterSearch: false, closeAfterReset: false 并将对话框的关闭按钮设置为隐藏。所以我不明白如何关闭对话框。到下一个问题。 colModel 中的每一列都可以有 search: false 选项。关于“and”或“or”选项的最后一个问题：您可以使用$searchDialog.find("select.opsel").hide();通过“ADD”/“OR”操作隐藏选择。

现在我隐藏了“AND”/“OR”，在我单击 + 或 - 添加附加规则后，它再次出现。我该怎么做才能保持隐藏？

如果您尝试使用一些标准对话框而不是编写自己的对话框，就会出现问题，但是您希望在标准对话框中进行许多自定义。一种方法是尝试在afterRedraw 回调中隐藏“添加”/“或”按钮。在“+”/“-”按钮上定义自定义事件处理程序的另一种方法。您完全可以选择另一种方式并创建自定义输入字段：有关详细信息，请参阅here。

【参考方案2】：

这是我使用 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 更加用户友好。

【讨论】：

嗨@Mike。这个解决方案效果很好，但是如果我们在没有分页的情况下加载所有 1000 条记录，那么过滤将无法按预期正常工作。对此有什么建议吗？

我已将 rowNum:-1 设置为一次加载所有记录，在这种情况下过滤无法正常工作。