Поиск по таблице в JqGrid

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Последнее обновление: 31.10.2015

Теперь добавим поиск по таблице. Для этого изменим представление из предыдущей темы следующим образом:

@{
    Layout = null;
}

<html>
<head>
    <title>jqGrid</title>
    <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
    <link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="~/Scripts/i18n/grid.locale-ru.js" type="text/javascript"></script>
    <style>
        body {background-color:#f0f0ffa;}
        .ui-jqgrid .ui-pg-input {height:20px;}
        .ui-jqgrid .ui-jqgrid-pager {height:50px;}
    </style>
</head>
<body>
<h2>jQGrid</h2>
<table id="jqg"></table>
<div id="jpager"></div>
<script type="text/javascript">
$(document).ready(function () {
    $("#jqg").jqGrid({
        url: '@Url.Action("GetData")',
        datatype: "json",
        colNames: ['Id', 'Название', 'Автор', 'Год', 'Цена'],
        colModel: [
        { name: 'Id', index: 'Id', width: 30, stype: 'text' },
        { name: 'Name', index: 'Name', width: 150, sortable: true},
        { name: 'Author', index: 'Author', width: 150, sortable: true },
        { name: 'Year', index: 'Year', width: 100, sortable:false },
        { name: 'Price', index: 'Price', width: 80, align: "right", sortable: true }
        ],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#jpager',
        loadonce:true,
        sortname: 'Id',
        sortorder: "desc", // порядок сортировки,
        caption: "Список Книг"
    });
    $("#jqg").jqGrid('navGrid', '#jpager', {

        add: false,
        del: false,
        edit: false,
        search: true,
        searchtext: "Поиск",
        refresh: true,
        refreshtext: "Обновить"
    });
});
</script> 
</body>
</html>

Во-первых, мы можем управлять визуальными свойствами элементов грида, устанавливая стили .ui-jqgrid .ui-jqgrid-pager {height:50px;}. В некоторых случаях это желательно делать, так как встроенные стили могут оказаться не совсем оптимальными. Элемент .ui-jqgrid-pager как раз представляет нижнюю панель с кнопками и пагинацией.

Для управления нижней панелью используется функция $("#jqg").jqGrid('navGrid', '#jpager',.... В ней задаются параметры нижней панели. Так, по умолчанию на панель добавляются кнопки для добавления, удаления и т.д. Но пока нам они не нужны, и поэтому для них устанавливается значение false: add: false

Нам нужны только кнопки поиска и обновления, поэтому для них задается значение true, и опционально мы можем задать и текст (значение текста также можно оставить пустым: refreshtext: "")

Обновление в данном случае не обращается к серверу, а обновляет данные в гриде, которые могли подвергнуться сортировке.

И затем при нажатии на кнопку поиска отобразится окно, в котором по разным критериям мы сможем найти нужные объекты:

Поиск в JqGrid

Окно поиска имеет набор полей с некоторыми значениями, которые при желание мы можем изменить. Для этого нам надо перейти к файлу grid.locale-ru.js и найти параметр search, который и задает все опции окна поиска:

search : {
		caption: "Поиск...",
		Find: "Найти",
		Reset: "Сброс",
		odata: [{ oper:'eq', text:"равно"},{ oper:'ne', text:"не равно"},....],
		groupOps: [	{ op: "AND", text: "все" }, { op: "OR", text: "любой" }],
		operandTitle : "Click to select search operation.",
		resetTitle : "Reset Search Value"
	},

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850