在jQgrid中实现删除

时间:2012-04-21 07:56:00

标签: jquery jqgrid jqgrid-asp.net jqgrid-formatter

我是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();

网格首先加载数据,但是当点击编辑按钮时出现错误。

1 个答案:

答案 0 :(得分:3)

我认为问题的根源是你填充网格的rowid不正确。您可能正确填充了网格行的ID,但只是不使用这些信息。

顺便提一下,您使用Action参数,其值为"Insert""Update""Delete"。另一方面,已经有标准参数oper,它将在行编辑期间发送到服务器(请参阅here)。 oper参数的值将为“add”,“edit”和“del”。所以我认为在编辑过程中不需要使用额外的Action参数。我建议你只是测试oper参数的值。

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

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

我认为您在所有网址中使用的ActionPage=TransportType附加参数的使用没有任何意义。如果您确实需要为了其他目的而共享相同的网址"jQGridHandler.ashx",则可以使用editurl: "jQGridHandler.ashx"并使用ActionPage=TransportTypepostData和{{}添加editData部分到网址{1}}参数。

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项的默认设置(请参阅here)。

代码中出现问题的另一个重要问题。您使用colModel设置。在这种情况下,重要的是在reloadAfterSubmit: false操作的服务器响应中返回新创建项目的id。所以使用应该使用"Insert"在服务器响应的主体中写入id。此外,您需要使用response.Write(output);(请参阅the answer)从服务器响应中获取新ID并将其转发到jqGrid:

afterSubmit

更新:您可以从here下载演示项目。