jqGrid - 更改过滤器/搜索弹出窗体 - 在页面上是平的 - 不是对话框

Question

我正在使用jqgrid。

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

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

需要看起来像这样：

再次让select标签填充正确的信息（就像它们在弹出窗口中一样），当点击“保存”时，它应该像经常那样将请求发送到服务器。

这可能吗？

******* ******* EDIT

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

Answer 1

您可以找到here旧搜索对话框的问题解决方案。我将demo修改为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 更多更加用户友好。