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

Question

我正在使用jqgrid。

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

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

需要看起来像这样：

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

这可能吗？

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

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

Answer 1

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

您可以在演示上查看结果：

相应代码如下：

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