jquery - 在jQgrid中实现删除

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

我是 jqGrid 的初学者，我想在 jqGrid 中实现删除 Actin 我编写了填充 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 });

以及 get 的处理程序

ActionPage write this code

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

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

最佳答案

我认为问题的根源在于您填充网格的rowid不正确。也许您确实正确填写了网格行的 id，但只是不使用该信息。

顺便说一下你使用Action的方式参数值为 "Insert" , "Update"和"Delete" 。另一边已经有标准参数oper它将在行编辑期间发送到服务器(请参阅 here )。 oper的值参数将为“添加”、“编辑”和“删除”。所以我认为没有必要使用额外的 Action编辑时的参数。我建议您只测试 oper 的值参数代替。

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

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

我认为 ActionPage=TransportType 的使用没有任何意义您在所有 URL 中使用的附加参数。如果您确实需要共享相同的 URL "jQGridHandler.ashx"出于其他目的，您可以使用 editurl: "jQGridHandler.ashx"并添加ActionPage=TransportType使用postData作为URL的一部分, editData和delData参数。

与 oper 相同参数 又一个参数，名称为 id将在编辑操作期间发送到服务器。所以你可以使用request["TRANSPORT_ID"]在服务器端。如果您更喜欢其他名称(我认为这不是真正必需的)，您可以添加 id: "TRANSPORT_ID"属性(property) 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 的默认值(参见 here )项目。

代码中还有一个更重要的事情会产生问题。您使用reloadAfterSubmit: false环境。在这种情况下，返回 id 很重要。关于 "Insert" 服务器响应中新创建的项目手术。所以使用时应该使用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中实现删除，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10257280/

上一篇：jquery - 如何将 AJAX 数组响应推送到 js 数组中

下一篇：asp.net-mvc-3 - Jquery Ajax Post 没有调用操作方法

相关文章：

jquery - JQGrid : deselect event

javascript - jqGrid不显示数据，没有错误

c# - jqgrid 未捕获类型错误 : Cannot read property 'stype' of undefined

jquery - 执行搜索时如何获取 jqGrid 搜索列类型？

javascript - 防止提交空字段(包括空格)的最有效的js/jquery方法

javascript - jquery中是否有相邻选择器之类的东西？

javascript - jqGrid 搜索延迟

jquery - jqGrid tableToGrid 格式化电话号码列

javascript - 原生 JavaScript document.ready - 如何使用 bindReady()

jquery - 如何使用 Node、Mongoose、Bootstrap 进行分页并将其传递给 html？

©2024 IT工具网  联系我们