Реализовать удаление в jQgrid

Я новичок в jqGrid, я хочу реализовать удаление актина в jqGrid. Я пишу этот код для заполнения jqGrid.

$(function () {
    var grid = $('#list');
    grid.jqGrid({
        url: 'jQGridHandler.ashx',
        postData: { ActionPage: 'TransportType', Action: 'Fill' },
        ajaxGridOptions: { cache: false },
        loadonce: true,
        direction: "rtl",
        datatype: 'json',
        height: 490,
        colNames: ['Code', 'TransportType', 'TransportTypeAbbr', 'Remark'],
        colModel: [
            { name: 'TRANSPORT_ID', width: 100, sortable: true, editable: true },
            { name: 'TRANSPORT_NAME', width: 200, sortable: true, editable: true },
            { name: 'TRANSPORT_ABBR', width: 100, sortable: true, editable: true },
            { name: 'REMARK', width: 100, sortable: true, editable: true }
        ],
        gridview: true,
        rowNum: 20,
        rowList: [20, 40, 60],
        pager: '#pager',
        sortname: 'TRANSPORT_ID',
        viewrecords: true,
        sortorder: 'ASC',
        caption: '',
        rownumbers: true
    });
    grid.jqGrid('navGrid', '#pager', { add: true, edit: true, del: true },
     { height: 300, width: 300, url: "JQGridHandler.ashx?ActionPage=TransportType&Action=Update", reloadAfterSubmit: false },
     { height: 400, width: 500, url: "JQGridHandler.ashx?ActionPage=TransportType&Action=Insert", reloadAfterSubmit: false },
     { url: "JQGridHandler.ashx?ActionPage=TransportType&Action=Delete", reloadAfterSubmit: false },
     { multipleSearch: true, overlay: false, width: 460 });

и в jQGridHandler я пишу этот код

case "TransportType":
    var transport = new TransportTypesBusiness();
    TRANSPORT_TYPES transportItem;
    switch (request.QueryString["Action"])
    {
        case "Fill":
            string numberOfRows = request["rows"];
            string pageIndex = request["page"];
            int totalRecords = 0;
            output = transport.BuildJQGridResults(Int32.Parse(numberOfRows), Int32.Parse(pageIndex), totalRecords);
            response.Write(output);
            break;
        case "FillDrop":
            output = transport.BuildJQGridResults();
            response.Write(output);
            break;
        case "Insert":
            transportItem = new TRANSPORT_TYPES  {
                TRANSPORT_NAME = request["TRANSPORT_NAME"].ToString(),
                TRANSPORT_ABBR = request["TRANSPORT_ABBR"].ToString(),
                REMARK = request["REMARK"].ToString()
            };
            bool isInsert = transport.AddNew(transportItem);
            break;
        case "Update":
            transportItem = new TRANSPORT_TYPES {
                TRANSPORT_ID = int.Parse(request["TRANSPORT_ID"].ToString()),
                TRANSPORT_NAME = request["TRANSPORT_NAME"].ToString(),
                TRANSPORT_ABBR = request["TRANSPORT_ABBR"].ToString(),
                REMARK = request["REMARK"].ToString()
            };
            bool isUpdate = transport.Update(transportItem);
            break;
        case "Delete":
            bool isDelete =
                transport.Delete(
                    transport.Find(c => c.TRANSPORT_ID == int.Parse(request["TRANSPORT_ID"].ToString())));
            break;
    }

Когда я удаляю запись, я не могу получить значение request["TRANSPORT_ID"].ToString().

Пожалуйста помогите. Спасибо всем

РЕДАКТИРОВАТЬ 1: я редактирую скрипт из этого

 $(function () {
            var grid = $('#list');
            grid.jqGrid({
                url: 'jQGridHandler.ashx',
                postData: { ActionPage: 'TransportType', Action: 'Fill' },
                ajaxGridOptions: { cache: false },
                loadonce: true,
                direction: "rtl",
                datatype: 'json',
                height: 490,
                colNames: ['Code', 'TransportType', 'TransportTypeAbbr', 'Remark'],
                colModel: [
                        { name: 'TRANSPORT_ID', key: true,,hidden:true, editable:false },
                        { name: 'TRANSPORT_NAME', width: 200, sortable: true, editable: true },
                        { name: 'TRANSPORT_ABBR', width: 100, sortable: true, editable: true },
                        { name: 'REMARK', width: 100, sortable: true, editable: true }
                       ],
                          cmTemplate: { width: 100, editable: true },
                prmNames: { oper: 'Action', editoper: 'Update', addoper: 'Insert',
                    deloper: 'Delete', id: 'STATUS_ID'
                },
                gridview: true,
                rowNum: 20,
                rowList: [20, 40, 60],
                pager: '#pager',
                sortname: 'TRANSPORT_ID',
                viewrecords: true,
                sortorder: 'ASC',
                caption: '',
                rownumbers: true
            });
             $.extend($.jgrid.edit, {
                editData: { ActionPage: 'StatusType' },
                savekey: [true, 13],
                closeOnEscape: true,
                closeAfterEdit: true,
                closeAfterAdd: true,
                reloadAfterSubmit: false,
                recreateForm: true
            });

            grid.jqGrid('navGrid', '#pager', { add: true, edit: true, del: true },
                    { height: 300, width: 300 },
                    { height: 400, width: 500 },
                    {},
                    { width: 460 });

и в обработчике для получения

ActionPage напишите этот код

 HttpRequest request = context.Request;
        string ss = request["ActionPage"].ToString();

сетка сначала загружает данные, но при нажатии кнопки редактирования появляется ошибка.

Pouya 21.04.2012 источник

Ответы (1)

arrow_upward
3
arrow_downward

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

Кстати, вы используете параметр Action со значением "Insert", "Update" и "Delete". С другой стороны уже есть стандартный параметр oper, который будет отправлен на сервер (см. здесь) во время редактирования строки. Значение параметра oper будет «добавить», «редактировать» и «удалить». Поэтому я не вижу необходимости использовать дополнительный параметр Action при редактировании. Вместо этого я рекомендую вам просто проверить значение параметра oper.

Если вы хотите иметь другое имя и значения параметра oper, вы можете использовать параметр prmNames jqGrid для изменения значений по умолчанию:

prmNames: { oper: "Action", editoper: "Update", addoper: "Insert", deloper: "Delete" }

Не вижу смысла использовать дополнительный параметр ActionPage=TransportType, который вы используете во всех URL. Если вам нужно использовать один и тот же URL-адрес "jQGridHandler.ashx" для какой-либо другой цели, вы можете использовать editurl: "jQGridHandler.ashx" и добавить часть ActionPage=TransportType к URL-адресам, используя параметры postData, editData и delData.

Аналогично с параметром oper еще один параметр с именем id будет отправлен на сервер во время операций редактирования. Таким образом, вы можете использовать request["TRANSPORT_ID"] на стороне сервера. Если вы предпочитаете другое имя (я не вижу необходимости в этом), вы можете добавить свойство id: "TRANSPORT_ID" в prmNames. Это решит вашу основную проблему.

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

$(function () {
    var grid = $('#list');
    grid.jqGrid({
        url: 'jQGridHandler.ashx',
        editurl: 'jQGridHandler.ashx',
        postData: { ActionPage: 'TransportType', Action: 'Fill' },
        loadonce: true,
        direction: "rtl",
        datatype: 'json',
        height: "auto",
        colNames: ['Code', 'TransportType', 'TransportTypeAbbr', 'Remark'],
        colModel: [
            { name: 'TRANSPORT_ID', key: true },
            { name: 'TRANSPORT_NAME', width: 200 },
            { name: 'TRANSPORT_ABBR' },
            { name: 'REMARK' }
        ],
        cmTemplate: {width: 100, editable: true},
        prmNames: { oper: 'Action', editoper: 'Update', addoper: 'Insert',
            deloper: 'Delete', id: 'TRANSPORT_ID'
        },
        gridview: true,
        rowNum: 20,
        rowList: [20, 40, 60],
        pager: '#pager',
        sortname: 'TRANSPORT_ID',
        viewrecords: true,
        sortorder: 'ASC',
        rownumbers: true
    });
    $.extend($.jgrid.edit, {
        editData: { ActionPage: 'TransportType' },
        savekey: [true, 13],
        closeOnEscape: true,
        closeAfterEdit: true,
        closeAfterAdd: true,
        reloadAfterSubmit: false,
        recreateForm: true
    });
    $.extend($.jgrid.del, {
        delData: { ActionPage: 'TransportType', Action: 'Delete' },
        reloadAfterSubmit: false,
        closeOnEscape: true
    });
    $.extend($.jgrid.search, {
        multipleSearch: true,
        recreateFilter: true,
        overlay: false
    });
    grid.jqGrid('navGrid', '#pager', {},
        { height: 300, width: 300, editData: { ActionPage: 'TransportType', Action: 'Update' } },
        { height: 400, width: 500, editData: { ActionPage: 'TransportType', Action: 'Insert' },
            afterSubmit: function (response) {
                return [true, '', response.responseText];
            }},
        {},
        { width: 460 }
    );
});

Я добавил некоторые дополнительные настройки и использовал cmTemplate для изменения значений по умолчанию (см. здесь) для colModel элементов.

Еще одна важная вещь в вашем коде, которая создает проблему. Вы используете настройку reloadAfterSubmit: false. В случае важно вернуть id для вновь созданного элемента в ответе сервера на операцию "Insert". Таким образом, следует использовать response.Write(output); для записи в теле ответа сервера идентификатора. Кроме того, вам нужно использовать afterSubmit (см. ответ), чтобы получить новый идентификатор из ответа сервера и перенаправить его в jqGrid:

grid.jqGrid('navGrid', '#pager', {},
    { height: 300, width: 300, editData: {ActionPage: 'TransportType', Action: 'Update'} },
    { height: 400, width: 500, editData: {ActionPage: 'TransportType', Action: 'Insert'},
        afterSubmit: function (response) {
            return [true, '', response.responseText];
        }},
    {},
    { width: 460 }
);

ОБНОВЛЕНО: демонстрационный проект можно загрузить с здесь< /а>.

Oleg 21.04.2012

comment

@ Олег: спасибо за помощь, но $.expand не является функцией и получает ошибку undifine. Вы имели в виду функцию $.extend? пожалуйста, помогите мне - Pouya; 22.04.2012

comment

@MohsenBahrzadeh: Добро пожаловать! Вы правы с $.extend. Я просто написал код вместе с остальной частью моего ответа, поэтому он может содержать некоторые опечатки. Я исправлю $.expand на $.extend в своем ответе. Еще, что я забыл вам написать: если вы используете key: true, вы можете отправлять более компактные данные в ответе сервера. Таким образом, вам не нужно отправлять значение TRANSPORT_ID дважды. Вы должны просто использовать соответствующий jsonReader. - Oleg; 22.04.2012

comment

@ oleg: спасибо, но когда на стороне сервера нужно указать значение ActionPage, возникает ошибка, если ActionPage не определен, пожалуйста, помогите мне. Благодарность - Pouya; 29.04.2012

comment

@MohsenBahrzadeh: Вы пытались использовать request["ActionPage"], где request определяется как HttpRequest request = context.Request, где HttpContext context — это параметр метода ProcessRequest вашей реализации IHttpHandler? - Oleg; 29.04.2012

comment

@ Олег: я пишу этот код в обработчике: HttpRequest request = context.Request; строка ss = запрос[ActionPage].ToString(); и когда я хочу получить значение, страница действия получает ошибку. - Pouya; 29.04.2012

comment

Я думаю, что не следует читать параметры editData: { ActionPage: 'StatusType' } или удалять,... - Pouya; 29.04.2012

comment

@MohsenBahrzadeh: У вас нет ошибок при заполнении jqGrid? Во время готовности jqGrid вы используете HTTP GET, поэтому вы можете использовать request.QueryString["Action"]. Для редактирования, добавления и удаления будет использоваться HTTP POST. Таким образом, request.QueryString["Action"] не будет определено, но если вы используете editData: {ActionPage: 'TransportType'} и editData: {ActionPage: 'TransportType'}, вы сможете получить доступ к ActionPage с помощью request["ActionPage"]. - Oleg; 29.04.2012

comment

@ Олег: я добавляю в часть редактирования вопроса, пожалуйста, помогите мне. Благодарность - Pouya; 29.04.2012

comment

@MohsenBahrzadeh: Вероятно, причина в опечатке в коде, который я разместил: нужно использовать $.extend вместо $.expand. Кроме того, я обнаружил некоторые синтаксические ошибки и то, что ActionPage: 'TransportType' не использовалось. Кроме того, чтобы иметь возможность использовать $.extend($.jgrid.edit, ... вы должны использовать более новую версию jqGrid. Поэтому вам следует обновить версию jqGrid, которую вы используете, до текущей версии, полученной на странице загрузки. Если у вас все еще будут какие-то проблемы, я могу загрузить для вас тестовый проект VS2010. - Oleg; 29.04.2012