Введение
При работе с данными часто возникает необходимость отображения их в виде таблицы, и кроме этого еще иметь возможности удобной манипуляции с данными: сортировка, фильтрация, редактирование и тд.
После непродолжительных поисков наткнулся на плагин jqGrid к jQuery.
Возможности плагина:
- Постраничная загрузка данных (Paging)
- Inline редактирование данных
- Сортировка и фильтрация
- Режим отображения – SubGrid. По сути это разновидность Master – Detail
- Режим отображения древовидных списков – TreeGrid
Подготовка
Чтобы начать использовать jqGrid необходимо скачать:
1. Плагин jqGrid
2. jQuery UI
Запускаем Microsoft Visual Studio 2010 и создаем проект ASP NET MVC 2 Application. После создания проекта необходимо добавить в
Далее добавляем в проект плагин jqGrid и jQuery UI, для этого из архива jqGrid копируем каталоги css и js в каталог Script\jquery.jqGrid проект. Из архива jQuery UI нужны каталоги css, js копируем их в Scripts\jquery.ui.
Получаем следующую структуру проекта
Итак, кроме добавления файлов в проект необходимо добавить следующие строки в \Views\Shared\Site.Master
<link href="../../Scripts/jquery.UI/css/redmond/jquery-ui-1.8.1.custom.css" rel="Stylesheet" type="text/css" />
<link href="../../Scripts/jquery.jqGrid/css/ui.jqgrid.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="../../Scripts/jquery.jqGrid/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqGrid/js/i18n/grid.locale-ru.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqGrid/js/jquery.jqGrid.min.js"></script>
Вот теперь у нас все готово для использования jqGrid.
Задача:
Отобразить список сотрудников в таблице.
В итоге должно получится следующее:
Controller
Начнем с создания контроллера. Для этого правой кнопкой мыши щелкаем на Controllers в проекте и выбираем Add -> Controller
В появившемся диалоге вводим имя контроллера EmployeeController и убираем галочку «Add action methods for Create, Update, Delete and Details scenarios»
В результате получаем класс EmployeeController наследник Controller с одним единственным методом Index.
Добавим в каталог Models проекта класс Employee
public class Employee
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Email { get; set; }
}
Возвращаемся в контроллер и добавляем следующий код:
public JsonResult EmployeeData()
{
var list = new List<Employee>
{
new Employee {Id = 1, FirstName = "Александр", LastName = "Македонский", Email = "alex.mak@test.com"},
new Employee {Id = 2, FirstName = "Иван", LastName = "Петров", Email = "ivan@test.com"},
new Employee {Id = 3, FirstName = "Сергей", LastName = "Сидоров", Email = "sarg@test.com"},
};
var result = new JsonResult()
{
Data = new { page = 0, total = 1, records = list.Count, rows = list }
};
return result;
}
Он будет возвращать данные для таблицы в виде Json структуры.
Далее нужно открыть Site.Master и добавить в меню пункт Сотрудники, для нужно после строк
<div id="menucontainer">
<ul id="menu">
добавить:
<li><%: Html.ActionLink("Сотрудники", "Index", "Employee")%></li>
View
Теперь для метода Index контроллера EmployeeConroller создадим View в которой и будет отображаться таблица с данными. Правой клавишей мыши на название метода Index и выбираем пункт «Add View».
В появившемся диалоге ничего не меняем, нажимаем кнопку Add, после чего получаем файл Index.aspx. Далее в блок
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
добавляем следующий код
<table id="EmployeeTable">
</table>
<div id="EmployeeTablePager">
</div>
Эти элементы будут использоваться плагином для создания jqGrid таблицы и навигатора по страницам. Если указать div вместо table то получим ошибку «a.rows is undefined» при получении данных.
Далее вставляем скрипт, содержащий настройки таблицы и колонок.
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#EmployeeTable').jqGrid({
url: '/Employee/EmployeeData',
datatype: "json",
mtype: 'POST',
jsonReader: {
page: "page",
total: "total",
records: "records",
root: "rows",
repeatitems: false,
id: ""
},
colNames: ['Id', 'Имя', 'Фамилия', 'Email'],
colModel: [
{ name: 'Id', width: 55 },
{ name: 'FirstName', width: 155 },
{ name: 'LastName', width: 150 },
{ name: 'Email', width: 150 }
],
pager: '#EmployeeTablePager',
width: 600,
viewrecords: true
});
});
</script>
Небольшой комментарий к этому скрипту не помешает, но чтение документации это не отменяет.
jQuery('#EmployeeTable')
– используя jQuery выбираем по ID контейнер в котором будет создана jqGrid таблица. Таблица должна иметь уникальный ID в пределах документа.
url: '/Employee/EmployeeData'
– указываем источник получения данных, в нашем случае это метод EmployeeData контроллера EmployeeController.
datatype: "json"
– тип данных получаемых с сервера, так же доступны форматы: xml, local, javascript, function подробнее об этом можно прочитать в разделе Retrieving Data.
mtype: 'POST'
, – тип запроса отправляемого серверу, если явно не указывать то по умолчанию будет отправлен GET запрос, что приведет к ошибке:
«This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet.»
Это можно обойти если в методе EmployeeData добавить
result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
, но это небезопасно. Phil Haack написал хорошую статью об этом JSON Hijacking.
colNames – массив с заголовками колонок таблицы
colModel – модель колонок, детально параметры описаны в разделе ColModel API
В общем то для простой демонстрации этого достаточно. Запускаем проект.
В следующей статье опишу как создавать, удалять и редактировать записи в таблице.
Исходники проекта можно скачать тут
