javascript jqGrid 行删除

jqGrid row(s) deletion

提问by Brandon Minton

I have a button used to delete a row when checked that calls the built in function 'delRowData'. Simple enough until you want to remove an array of rows/multiple rows (as in the built-in variable 'selarrrow'). Does anyone have a better answer than the horrible muck I've came up with (eg. modifying core jqGrid code)??

我有一个按钮，用于在选中时删除一行调用内置函数“delRowData”。足够简单，直到您想要删除一组行/多行（如在内置变量 'selarrrow' 中）。有没有人有比我想出的可怕的烂泥更好的答案（例如，修改核心 jqGrid 代码）？

Here's my code:

这是我的代码：

        $("#deleteButton").click(function(){ 
            var gr = jQuery("#myGrid").jqGrid('getGridParam','selarrrow'); 
            var su=jQuery("#myGrid").jqGrid('delRowData',gr.toString()); 
            (su) ? '' : alert("Already deleted or not in list"); 
        }); 

and now for the really nasty part of modifying core code in jquery.jqGrid.min.js:

现在是修改 jquery.jqGrid.min.js 中核心代码的真正讨厌的部分：

delRowData:function(f){
for(var m=0,max=f.length;m<max;m++){
    var j=false,i,c;
    this.each(function(){
        var e=this;
        if(i=e.rows.namedItem(f[m])){
            b(i).remove();
            e.p.records--;
            e.p.reccount--;
            e.updatepager(true,false);
            j=true;
            if(e.p.multiselect){
                c=b.inArray(f[m],e.p.selarrrow);
                c!=-1&&e.p.selarrrow.splice(c,1)
            }
            if(f==e.p.selrow)e.p.selrow=null
        }else return false;
        if(e.p.datatype=="local"){
            var k=e.p._index[f[m]];
            if(typeof k!="undefined"){
                e.p.data.splice(k,1);
                e.refreshIndex()
            }
        }
    });
}
        /*if(e.p.altRows===true&&j){
            var n=e.p.altclass;b(e.rows).each(function(a){
                a%2==1?b(this).addClass(n):b(this).removeClass(n)
            })
        }*/

    return j
}

Is there a better way to do this?

有一个更好的方法吗？

/*New details **/
So even if we iterate over the given jqGrid array 'selarrrow' and remove the the rows one by one while using jqGrid's default 'delRowData' function:

/ *新细节 **/
因此，即使我们遍历给定的 jqGrid 数组 'selarrrow' 并在使用 jqGrid 的默认 'delRowData' 函数时一一删除行：

$("#deleteButton").click(function(){ 
    $.each($("#myGrid").jqGrid('getGridParam','selarrrow'), function(index, value) {
        console.log($("#myGrid").jqGrid('getGridParam','selarrrow'));
        if ($("#myGrid").jqGrid('delRowData', value)) {
            console.log($("#myGrid").jqGrid('getGridParam','selarrrow'));
            console.log(value);
        } 
        else{
            console.log($("#myGrid").jqGrid('getGridParam','selarrrow'));
            console.log(value);
        }
    });
}); 

you'll see the code does not perform correctly and we have to go back to look at the jqGrid core-code function of 'delRowData'. The problem now lies with how it tackles the array. Here's the function un-minified:

你会看到代码没有正确执行，我们必须回过头来看看'delRowData'的jqGrid核心代码函数。现在的问题在于它如何处理数组。这是未缩小的功能：

delRowData:function(f){
    var j=false,i,c;
    this.each(function(){
        var e=this;
        if(i=e.rows.namedItem(f)){
            b(i).remove();
            e.p.records--;
            e.p.reccount--;
            e.updatepager(true,false);
            j=true;
            if(e.p.multiselect){
                c=b.inArray(f,e.p.selarrrow);
                //c!=-1&&e.p.selarrrow.splice(c,1)
            }
            if(f==e.p.selrow)
                e.p.selrow=null
            }else 
                return false;
            if(e.p.datatype=="local"){
                var k=e.p._index[f];
                if(typeof k!="undefined"){
                    e.p.data.splice(k,1);
                    e.refreshIndex()
            }
        }
        if(e.p.altRows===true&&j){
            var n=e.p.altclass;
            b(e.rows).each(function(a){
                a%2==1?b(this).addClass(n):b(this).removeClass(n)
            })
        }
    });
    return j
}

The problem is the commented out line in the middle of the function. I really wanted to avoid hacking core-code but it seems you have to do so unless you have a better idea.

问题是函数中间的注释行。我真的很想避免破解核心代码，但似乎你必须这样做，除非你有更好的主意。

采纳答案by Gary Green

Why not use each outside, instead of hacking the core?

为什么不使用每个外部，而不是破解核心？

$("#deleteButton").click(function(){
  var errors = [];
  jQuery("#myGrid").jqGrid('getGridParam','selarrrow').each(function(index, value) {
    if (!jQuery("#myGrid").jqGrid('delRowData', value)) errors.push(value);
  });
  if (errors.length)
  {
    alert('Already deleted or not in list on row(s): ' + errors.join(', ')); 
  }
}); 

回答by Michael Saffitz

The problem is that getGridParam is returning a reference to the selected rows (selarrrow). You then use this to iterate through a delete rows from the grid, which modifies selarrow on the line you identified. This changes the collection you're iterating over, so that subsequent iterations no longer point to the correct values.

问题是 getGridParam 正在返回对所选行的引用 (selarrrow)。然后，您可以使用它来遍历网格中的删除行，这会修改您标识的行上的 selarrow。这会更改您正在迭代的集合，以便后续迭代不再指向正确的值。

You can either use $.MakeArray to iterate through a copy of the selected arrays, or iterate from the tail of the array, for example:

您可以使用 $.MakeArray 遍历所选数组的副本，或者从数组的尾部进行迭代，例如：

var ids = $('#grid').getGridParam('selarrrow');
for (  var i = ids.length-1; i>=0; i--) {
  $('#grid').delRowData(ids[i]);
}

There's a discussion on this at: http://www.trirand.com/blog/?page_id=393/bugs/delrowdata-bug-on-grid-with-multiselect/

对此有一个讨论：http: //www.trirand.com/blog/?page_id=393/bugs/delrowdata-bug-on- grid-with-multiselect/

回答by Faiyaz

jqGrid removes the deleted row from selarrrow - arrow also. One of the way to do multiple row deletion is using

jqGrid 也从 selarrrow - arrow 中删除已删除的行。进行多行删除的一种方法是使用

var selrows = $('#grid').jqGrid('getGridParam', 'selarrrow');

while (selrows.length > 0)
{
  $('#grid').delRowData(selrows[0]);
}