如何在jqgrid中删除带有本地数据的行 [英] How to delete rows with local data in jqgrid

问题描述

jqGrid 参数 loadonce: true 被使用

jqGrid parameter loadonce: true is used

选择行并按下删除按钮

没有设置网址

如何仅删除本地数据中的行并禁止显示此错误消息?是否可以设置一些虚拟 url 或任何其他想法来允许行删除?如果添加和编辑表单也可以用于本地数据，那就太好了.

How to delete rows in local data only and suppress this error message ? Is it possbile to set some dummy url or any other idea to allow row delete? It would be nice if add and edit forms can be used also with local data.

            url: 'GetData',
            datatype: "json",
            multiselect: true,
            multiboxonly: true, 
            scrollingRows : true,
            autoencode: true,
            loadonce: true, 
            prmNames:  {id:"_rowid", oper: "_oper" }, 
            rowTotal: 999999999,
            rownumbers: true,
            rowNum: 999999999,

更新 1

从奥列格的回答中，我理解了以下解决方案:

From Oleg answer I understood the following solution:

1. 禁用 jqGrid 标准删除按钮
2. 向工具栏添加新的删除按钮.

3. 从此按钮提供的点击事件调用

1. Disable jqGrid standard delete button
2. Add new delete button to toolbar.

3. From this button click event call provided

grid.jqGrid('delGridRow', rowid, myDelOptions);

grid.jqGrid('delGridRow', rowid, myDelOptions);

方法.可以选择多行.如何删除所有选中的行，本示例只删除一个?

method. Multiple rows can selected. How to delete all selected rows, this sample deletes only one ?

更改 jqGrid 以便删除、编辑、添加按钮在没有 url 的情况下工作不是更好吗?目前，本地数据编辑需要传递总是返回成功的虚拟 url.

Is'nt it better to change jqGrid so that delete, edit, add buttons work without url ? Currently it is required to pass dummy url which returns success always for local data editing.

推荐答案

你可以使用 delRowData 方法会删除任何本地行.

You can use delRowData method do delete any local row.

您可以使用 delGridRow如果需要，可以进行表单编辑.我描述了 这里 并用于格式化程序:'actions'(请参阅此处，这里 最初是 这里).

You can do use delGridRow from the form editing if you need it. I described the way here and used for formatter:'actions' (see here, here and originally here).

var grid = $("#list"),
    myDelOptions = {
        // because I use "local" data I don't want to send the changes
        // to the server so I use "processing:true" setting and delete
        // the row manually in onclickSubmit
        onclickSubmit: function(options, rowid) {
            var grid_id = $.jgrid.jqID(grid[0].id),
                grid_p = grid[0].p,
                newPage = grid_p.page;

            // reset the value of processing option which could be modified
            options.processing = true;

            // delete the row
            grid.delRowData(rowid);
            $.jgrid.hideModal("#delmod"+grid_id,
                              {gb:"#gbox_"+grid_id,
                              jqm:options.jqModal,onClose:options.onClose});

            if (grid_p.lastpage > 1) {// on the multipage grid reload the grid
                if (grid_p.reccount === 0 && newPage === grid_p.lastpage) {
                    // if after deliting there are no rows on the current page
                    // which is the last page of the grid
                    newPage--; // go to the previous page
                }
                // reload grid to make the row from the next page visable.
                grid.trigger("reloadGrid", [{page:newPage}]);
            }

            return true;
        },
        processing:true
    };

然后使用

grid.jqGrid('delGridRow', rowid, myDelOptions);

更新:在 multiselect: true 的情况下，myDelOptions 可以修改为以下内容:

UPDATED: In case of multiselect: true the myDelOptions can be modified to the following:

var grid = $("#list"),
    myDelOptions = {
        // because I use "local" data I don't want to send the changes
        // to the server so I use "processing:true" setting and delete
        // the row manually in onclickSubmit
        onclickSubmit: function(options) {
            var grid_id = $.jgrid.jqID(grid[0].id),
                grid_p = grid[0].p,
                newPage = grid_p.page,
                rowids = grid_p.multiselect? grid_p.selarrrow: [grid_p.selrow];

            // reset the value of processing option which could be modified
            options.processing = true;

            // delete the row
            $.each(rowids,function(){
                grid.delRowData(this);
            });
            $.jgrid.hideModal("#delmod"+grid_id,
                              {gb:"#gbox_"+grid_id,
                              jqm:options.jqModal,onClose:options.onClose});

            if (grid_p.lastpage > 1) {// on the multipage grid reload the grid
                if (grid_p.reccount === 0 && newPage === grid_p.lastpage) {
                    // if after deliting there are no rows on the current page
                    // which is the last page of the grid
                    newPage--; // go to the previous page
                }
                // reload grid to make the row from the next page visable.
                grid.trigger("reloadGrid", [{page:newPage}]);
            }

            return true;
        },
        processing:true
    };

更新 2:要在删除操作上支持键盘并将删除"按钮设置为默认值，您可以在 delSettings 附加选项中添加

UPDATED 2: To have keyboard support on the Delete operation and to set "Delete" button as default you can add in the delSettings additional option

afterShowForm: function($form) {
    var form = $form.parent()[0];
    // Delete button: "#dData", Cancel button: "#eData"
    $("#dData",form).attr("tabindex","1000");
    $("#eData",form).attr("tabindex","1001");
    setTimeout(function() {
        $("#dData",form).focus(); // set the focus on "Delete" button
    },50);
}

这篇关于如何在jqgrid中删除带有本地数据的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！