jqGrid - Изменить фильтр / всплывающую форму поиска - чтобы быть плоским на странице - не диалог

Question

Я использую jqgrid.

Мне действительно нужна помощь в этом, и я понятия не имею, как это сделать, но я уверен, что это возможно ... Кто-нибудь может дать мне хотя бы частичный ответ? должны были начать с?

Теперь у меня есть требование о том, что для поиска и фильтрации сетки мне не нужно открывать всплывающее окно с обычной формой модели, вместо этого фильтр должен быть открыт при входе на страницу, но не как всплывающая форма, но должен в верхней части страницы, но все еще имеют все функции.

Должен выглядеть так:

И снова заполнение тега select правильной информацией (как они делают во всплывающей форме), и при нажатии «Сохранить» он должен отправить запрос на сервер, как обычный.

Возможно ли это?

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

Единственное, что мне в основном нужно, это иметь фильтр без диалоговой части.

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

Вот как я это реализовал, используя отличную помощь Олега.

Я хотел, чтобы мои пользователи могли сразу ввести критерии поиска (в данном случае имя пользователя) и показать 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 }]);
}

Еще раз, спасибо Олегу за то, что показали, как использовать эти поисковые фильтры.

Это действительно делает jqGrid намного больше пользователясодружественная.