在jQgrid中实施Delete [英] Implement Delete In jQgrid

问题描述

我是jqGrid的入门者，我想在jqGrid中实现Delete Actin我编写此代码以填充jqGrid

i'm starter in jqGrid, i want Implement Delete Actin in jqGrid I writing this Code For Fill 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中，我编写这段代码

and in jQGridHandler i Write this code

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()值.

When do I delete a record,I can not get request["TRANSPORT_ID"].ToString() value.

请帮助我.谢谢大家

我从这里编辑脚本

 $(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 write this code

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

首先加载数据，但是单击编辑"按钮时出现错误.

grid first load data but when click in edit button get error.

推荐答案

我认为问题的根源是您 fill 网格的行号不正确.可能您确实正确填写了网格行的ID，但只是不使用该信息.

I suppose that the origin of your problem is that you fill rowids of the grid not correctly. Probably you do fill ids of the rows of the grid correctly, but just don't use the information.

通过使用Action参数和值"Insert"，"Update"和"Delete"的方式.另一方面，已经有标准参数oper将会发送到服务器(请参见此处). oper参数的值将为"add"，"edit"和"del".因此，我认为在编辑过程中无需使用其他Action参数.我建议您只测试oper参数的值.

By the way you use Action parameter with the value "Insert", "Update" and "Delete". On the other side there are already standard parameter oper which will be sent to the server (see here) during the row editing. The value of oper parameter will be "add", "edit" and "del". So I see no need to use additional Action parameter during editing. I recommend you just to test for the value of oper parameter instead.

如果您想使用其他名称和oper参数的值，则可以使用jqGrid的prmNames选项更改默认值:

If you do like to have another name and values of oper parameter you can use prmNames option of jqGrid to change the defaults:

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

我看不到在所有URL中使用ActionPage=TransportType附加参数的意义.如果确实需要出于其他目的共享相同的URL "jQGridHandler.ashx"，则可以使用editurl: "jQGridHandler.ashx"并使用postData，editData和delData参数将ActionPage=TransportType部分添加到URL中.

I don't see any sense in the usage of ActionPage=TransportType additional parameter which you use in all URLs. If you do require to share the same URL "jQGridHandler.ashx" for some other purpose you can use editurl: "jQGridHandler.ashx" and add ActionPage=TransportType part to URLs using postData, editData and delData parameters.

用oper参数的相同方式，在编辑操作期间，还会将另一个名称为id的参数发送到服务器.因此，您可以在服务器端使用request["TRANSPORT_ID"].如果您更喜欢其他名称(我看不到它是真正必需的名称)，则可以在prmNames中添加id: "TRANSPORT_ID"属性.它将解决您的主要问题.

In the same way with oper parameter one more parameter with the name id will be send to the server during the editing operations. So you can use request["TRANSPORT_ID"] on the server side. If you prefer another name (I don't see that it's really required) you can add id: "TRANSPORT_ID" property in prmNames. It will solve your main problem.

因此，如果您不想在服务器代码中进行任何修改，则只需在客户端执行以下操作

So if you don't want to make any modifications in the server code you can just do the following on the client side

$(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更改了默认设置(请参见

I added some additional settings and used cmTemplate to change the defaults (see here) for colModel items.

您的代码中还有一个重要的问题.您使用reloadAfterSubmit: false设置.在这种情况下，重要的是在服务器对"Insert"操作的响应中，在新创建的项目上返回id.因此使用时应使用response.Write(output);在服务器响应的正文中写入ID.另外，您需要使用afterSubmit(请参见答案)从服务器响应中获取新ID并将其转发到jqGrid :

One more important thing in your code which make a problem. You use reloadAfterSubmit: false setting. In the case it's important to return the id on the new created item in the response from the server on "Insert" operation. So use should use response.Write(output); to write in the body of the server response the id. Additionally you need use afterSubmit (see the answer) to get the new id from the server response and forward it to 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 }
);

已更新:您可以从这里.

这篇关于在jQgrid中实施Delete的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！