0

我有两个网格，允许用户在它们之间复制行。对于小型数据集，没问题，但对于大型数据集（5-10000），我注意到 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，这非常慢。

关于如何有效地为大型数据集完成此任务的任何想法？

4

2 回答 2

0

当涉及数千行时，任何客户端操作都会非常缓慢。加速它的最佳方法是在服务器端进行操作。例如，您可以将 ID 作为 AJAX 请求的一部分传递给服务器，然后在收到服务器响应时刷新网格。

或者，用户是否真的选择了 5000 行进行复制，或者他们只是尝试进行批量操作，例如“全部复制”？也许您可以实现这样的功能来改善整体体验，并消除将任何 ID 传递给 AJAX 请求的需要。

这有帮助吗？

于 2013-02-26T20:35:16.480 回答
0

通过按 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 循环中用四个空格分割数据，这样我们就可以得到每个单元格的四个空格数据。

于 2014-03-21T09:24:56.260 回答