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

Question

我正在使用 jqgrid。

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

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

需要看起来像这样：

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

这可能吗？

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

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

Answer 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"});

Answer 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 更加用户友好。