JQGrid - 在網格之間複製選定的行

Question

我有兩個網格允許用戶在兩​​者之間複製行。對於小集合，沒有問題，但對於大數據集（5-10萬），我注意到JQGrid非常慢。這是我現在有：

$('#imgRightArrow').click(function() 
{ 
    var fromGrid = $('#fromGrid'); 
    var toGrid = $('#toGrid'); 
    var rowKeys = fromGrid.getGridParam('selarrrow'); 
    var j = rowKeys.length - 1; 
    if (j >= 0) $('body').addClass('loading'); 

    (function() 
    { 
     for (; j >= 0; j--)      // - high to low to avoid id reordering 
     { 
      var row = fromGrid.jqGrid('getRowData', rowKeys[j]); 
      toGrid.addRowData('gtp_' + rowKeys[j], row); // - add prefix to keep rowid's unique between grids 
      fromGrid.delRowData(rowKeys[j]); 

      if (j % 100 === 0) 
      { 
       $('#fromGridHeader').text(fromGrid.jqGrid('getGridParam', 'records') + ' Cards on this Order'); 
       $('#toGridHeader').text(toGrid.jqGrid('getGridParam', 'records') + ' Cards to be Dispatched'); 

       if (j === 0)  // - done 
        $('body').removeClass('loading'); 
       else 
       { 
        j--; 
        window.setTimeout(arguments.callee); // - set a timer for the next iteration 
        break; 
       } 
      } 
     } 
    })(); 
}); 

它是如此之慢，我不得不使用kludge來防止瀏覽器超時。

我已經試過這樣的事情：

$('#imgRightArrow').click(function() 
{ 
    var fromGrid = $('#fromGrid'); 
    var toGrid = $('#toGrid'); 

    var copyData = toGrid.jqGrid('getRowData'); // - existing data 
    var rowKeys = fromGrid.getGridParam('selarrrow'); 

    var j = rowKeys.length - 1; 
    if (j >= 0) $('body').addClass('loading'); 

    (function() 
    { 
     for (; j >= 0; j--) 
     { 
      copyData.push(fromGrid.jqGrid('getRowData', rowKeys[j])); 
      fromGrid.jqGrid('delRowData', rowKeys[j]); 

      if (j % 100 === 0) 
      { 
       if (j === 0) 
       { 
        fromGrid[0].refreshIndex(); 
        toGrid.jqGrid('clearGridData', true); 
        toGrid.setGridParam({ data: copyData }); 
        toGrid[0].refreshIndex(); 
        toGrid.trigger('reloadGrid'); 

        $('#fromGridHeader').text(fromGrid.jqGrid('getGridParam', 'records') + ' Cards on this Order'); 
        $('#toGridHeader').text(toGrid.jqGrid('getGridParam', 'records') + ' Cards to be Dispatched'); 
        $('body').removeClass('loading'); 
       } 
       else 
       { 
        j--; // - manually decrement since we break 
        window.setTimeout(arguments.callee); // - set a timer for the next iteration 
        break; 
       } 
      } 
     } 
    })(); 
}); 

...似乎更快，但是從fromGrid刪除行仍然使用delRowData，這是非常緩慢的。

關於如何有效完成大數據集的任何想法？

Answer 1

當涉及到數千行時，任何客戶端操作都會非常緩慢。加速它的最好方法是做服務器端的操作。例如，您可以將ID作爲AJAX請求的一部分傳遞給服務器，然後在收到服務器響應時刷新網格。

另外，用戶是真的選擇了5000行復制，還是他們只是試圖做一個批量操作，如「全部複製」？也許你可以實現這樣的功能來改善整體體驗，並且不需要將任何ID傳遞給AJAX請求。

這是否幫助？

Answer 2

通過按Ctrl + C，我們可以複製並使用以下方法粘貼選定行，

$(document).ready(function() { 

$('#gvMygrid').keyup(function (e) { 
    var crtlpressed = false; 
    var celValue = ""; 
    var celValue1 = ""; 
    var celValue2 = ""; 
    if (e.keyCode == 17) { 
     crtlpressed = true; 
    } 
    if (e.keyCode == 67 && e.ctrlKey == true) { 
     var myGrid = $('#gvMygrid'); 
     var my_array = new Array; 
     my_array = $("#gvMygrid").getGridParam('selarrrow'); 

     for (var i = 0; i < my_array.length; i++) { 

      var rowInfo = $("#gvMygrid").getRowData(my_array[i]); 
      if (rowInfo != null) 
       var data = JSON.stringify(rowInfo); 
      var splitData = data.split('","'); 

     for (var j = 1; j < splitData.length; j++) { 
       celValue1 = celValue1 + splitData[j].split(":")[1] + "  "; 
      } 
      celValue1 = celValue1 + '\r\n'; 
     } 
     celValue2 = celValue1.replace(/"/g, ''); 
     celValue = celValue2.replace(/}/g, ''); 
     crtlpressed = false; 
     copyToClipboard(celValue); 
    } 
    function copyToClipboard(s) { 
     if (window.clipboardData && clipboardData.setData) { 
      window.clipboardData.clearData("Text"); 
      clipboardData.setData("Text", s); 
     } 
    } 

}); }); 

我們分裂了四個空格中的數據在for循環，這樣我們可以得到每個單元的數據有四個空間。