CRUD-операции в JqGrid

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

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

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

@{
    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>
        .ui-jqgrid .ui-pg-input {height:20px;}
        .ui-jqgrid .ui-jqgrid-pager {height:40px;}
        .ui-jqgrid .ui-jqgrid-pager .ui-pg-div {font-size:14px;}
    </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', key:true },
        { name: 'Name', index: 'Name', width: 150, editable: true, edittype: 'text', sortable: true },
        { name: 'Author', index: 'Author', width: 150, editable: true, edittype: 'text', sortable: true },
        { name: 'Year', index: 'Year', width: 100, editable: true, edittype: 'text', sortable: false },
        { name: 'Price', index: 'Price', width: 80, align: "right", editable: true, edittype: 'text', sortable: true}
        ],
        rowNum: 10,
        rowList: [10, 20, 30],
        width:800,
        pager: '#jpager',
        loadonce:true,
        sortname: 'Id',
        sortorder: "desc",
        caption: "Список Книг"
    });
    $("#jqg").jqGrid('navGrid', '#jpager', {

        search: true,
        searchtext: "Поиск",
        refresh: false,
        add: true, // добавление
        del: true, // удаление
        edit: true, // редактирование
        view: true, // просмотр записи
        viewtext: "Смотреть",
        viewtitle: "Выбранная запись",
        addtext: "Добавить",
        edittext: "Изменить",
        deltext: "Удалить"
    }, 
    update("edit"), // обновление
    update("add"), // добавление
    update("del") // удаление
    );
    function update(act) {
        return {
            closeAfterAdd: true, // закрыть после добавления
            height: 250,
            width: 400,
            closeAfterEdit: true, // закрыть после редактирования
            reloadAfterSubmit: true, // обновление
            drag: true,
            onclickSubmit: function (params) {
                var list = $("#jqg");
                var selectedRow = list.getGridParam("selrow");
                rowData = list.getRowData(selectedRow);
                if (act === "add")
                    params.url= '@Url.Action("Create")';
                else if (act === "del")
                    params.url = '@Url.Action("Delete")';
                else if (act === "edit")
                    params.url = '@Url.Action("Edit")';
            },
            afterSubmit: function (response, postdata) {
				// обновление грида
                $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')
                return [true, "", 0]
            }
        };
    };
});
</script> 
</body>
</html>

В отличие от представления прошлой темы в определении столбцов добавлена следующая опция: editable: true,. Она позволит при генерации форм добавления/редактирования создать для данного столбца поле. Поскольку свойство Id нам не надо менять или устанавливать вручную, то для него эта опция не указывается.

Также здесь подключена функциональность просмотра отдельных записей, добавления, редактирования и удаления: add: true, del: true, edit: true, view: true,, кроме того, также устанавливается текст меток. Опять же можно было бы и не устанавливать текст, тогда бы были просто иконки для данных функциональностей.

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

onclickSubmit: function (params) {
    var list = $("#jqg");
    var selectedRow = list.getGridParam("selrow");
    rowData = list.getRowData(selectedRow);
    if (act === "add")
        params.url= '@Url.Action("Create")';
    else if (act === "del")
        params.url = '@Url.Action("Delete")';
    else if (act === "edit")
        params.url = '@Url.Action("Edit")';
},

В данном случае переменная params.url хранит адрес, по которому форма с данными будет отправляться. При этом нам не надо явным образом создавать какую-либо форму, плагин JqGrid все сделает за нас.

И также определена функция afterSubmit, вызываемая после получения ответа от сервера после отправки формы. Она выполняет обновление грида:

afterSubmit: function (response, postdata) {
    $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')
    return [true, "", 0]
}

Она возвращает объект в виде массива, где первый элемент показывает, что запрос выполнился удачно, поэтому true, в случае ошибке можно было указать false. Второй параметр указывает на сообщение от сервера. А третий параметр должен содержать id добавленной или обновленной или удаленной записи. Для простоты примера я сделал сообщение пустым, а вместо id указал число 0.

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

[HttpPost]
public void Edit(Book book)
{
    // действия по редактированию
}

[HttpPost]
public void Create(Book book)
{
    // действия по добавлению
}
[HttpPost]
public void Delete(int id)
{
    // действия по удалению
}

Запустив приложение, мы можем просмотреть отдельную запись:

Добавить новую или редактировать старую (форма редактирования аналогична форме добавления):

Add to JqGrid

Удалить старую:

Delete in JqGrid

Таким образом, мы рассмотрели некоторые аспекты использования плагина JqGrid для создания гридов с богатой функциональностью.

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

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