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请求的一部分传递给服务器，然后在收到服务器响应时刷新网格。

或者，用户是否真的选择要复制的五千行，或者他们只是尝试进行批量操作，例如“全部复制”？也许您可以实现这样的功能来改善整体体验，并且无需将任何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循环中使用四个空格拆分数据，这样我们就可以用四个空格获取每个单元格数据。

JQGrid - 在网格之间复制选定的行

2 个答案: