在 jQgrid 中实现删除 [英] 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.

请帮助我.谢谢大家

编辑 1:我从这里编辑脚本

EDIT 1: i Edit script from this

 $(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 });

在处理程序中获取

动作页面写这段代码

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

网格首先加载数据，但点击编辑按钮时出现错误.

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

推荐答案

我想你的问题的根源是你填充网格的rowids不正确.可能您确实正确填写了网格行的 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 将被发送到服务器(参见 here) 在行编辑期间.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" 并添加 ActionPage=TransportType 部分使用 postData、editData 和 delData 参数添加到 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 更改默认设置(请参阅 here) 用于 colModel 项.

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 中实现删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！