jquery – 在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;
    }

何时删除记录,我无法获取请求[“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
write this code

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

网格首先加载数据,但点击编辑按钮时获取错误.

最佳答案
我想你的问题的根源是你没有正确地填充网格的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" }

我在使用所有URL中使用的ActionPage = TransportType附加参数时没有任何意义.如果您确实需要为了其他目的共享相同的URL“jQGridHandler.ashx”,您可以使用editurl:“jQGridHandler.ashx”并使用postData,editData和delData参数将ActionPage = TransportType部分添加到URL.

与oper参数相同的方式,在编辑操作期间,将再向服务器发送一个名为id的参数.因此,您可以在服务器端使用请求[“TRANSPORT_ID”].如果您更喜欢其他名称(我不认为它确实是必需的),您可以在prmNames中添加id:“TRANSPORT_ID”属性.它将解决您的主要问题.

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

$(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项的默认值(请参阅here).

代码中一个更重要的问题就是它.您使用reloadAfterSubmit:false设置.在这种情况下,重要的是在“插入”操作中从服务器返回响应中新创建项目的id.所以使用应该使用response.Write(output);在服务器的主体中写入响应的id.此外,您需要使用afterSubmit(参见the answer)从服务器响应中获取新ID并将其转发到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 }
);

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

转载注明原文:jquery – 在jQgrid中实现删除 - 代码日志