如何在jqgrid中删除包含本地数据的行

时间:2011-07-22 21:48:24

标签: jqgrid

jqGrid参数loadonce:使用true

选择行并按删除按钮

没有设置网址

如何仅删除本地数据中的行并禁止显示此错误消息? 是否可以设置一些虚拟URL或任何其他想法以允许行删除? 如果添加和编辑表单也可以与本地数据一起使用,那将是很好的。

            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

从Oleg回答我理解以下解决方案:

  1. 禁用jqGrid标准删除按钮
  2. 向工具栏添加新的删除按钮。
  3. 从此按钮点击提供的事件调用

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

  4. 方法。 可以选择多行。如何删除所有选定的行,此示例只删除一个?

    更改jqGrid是否更好,以便删除,编辑,添加按钮无需网址?目前,需要传递虚拟URL,该URL始终为本地数据编辑返回成功。

1 个答案:

答案 0 :(得分:10)

您可以使用delRowData方法删除任何本地行。

如果需要,您可以在表单编辑中使用delGridRow。我描述了here并用于格式化程序的方式:'操作'(请参阅herehere和最初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可以修改为以下内容:

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附加选项

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