Javascript JQGrid-在网格之间复制选定行
我有两个网格,允许用户在两个网格之间复制行。对于小数据集,没有问题,但是对于大数据集(5-10000),我注意到JQGrid非常慢。这就是我现在拥有的:Javascript JQGrid-在网格之间复制选定行,javascript,jquery,jqgrid,Javascript,Jquery,Jqgrid,我有两个网格,允许用户在两个网格之间复制行。对于小数据集,没有问题,但是对于大数据集(5-10000),我注意到JQGrid非常慢。这就是我现在拥有的: $('#imgRightArrow').click(function () { var fromGrid = $('#fromGrid'); var toGrid = $('#toGrid'); var rowKeys = fromGrid.getGridParam('selarrrow'); var j =
$('#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;
}
}
}
})();
});
它太慢了,我不得不用一个乱七八糟的方法来防止浏览器超时
我试过这样的方法:
$('#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,这非常缓慢
对于如何高效地为大型数据集实现这一点,您有什么想法吗 当涉及数千行时,任何客户端操作都会非常慢。最好的加速方法是在服务器端进行操作。例如,您可以将ID作为AJAX请求的一部分传递给服务器,然后在收到服务器响应时刷新网格 或者,用户是否真的选择了五千行进行复制,或者他们只是尝试执行诸如“复制全部”之类的批量操作?也许您可以实现这样一个特性来改善总体体验,并消除向AJAX请求传递任何ID的需要
这有帮助吗?通过按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);
}
}
}); });
$(文档).ready(函数(){
$('gvMygrid').keyup(函数(e){
var crtlpressed=false;
var-celValue=“”;
var celValue1=“”;
var celValue2=“”;
如果(e.keyCode==17){
crtlpressed=true;
}
if(e.keyCode==67&&e.ctrlKey==true){
var myGrid=$(“#gvMygrid”);
var my_array=新数组;
my#u数组=$(“#gvMygrid”).getGridParam('selarrrow');
对于(var i=0;i
我们在for循环中用四个空格分割数据,这样我们可以用四个空格获得每个单元格的数据。这是有意义的。不,用户实际上希望功能选择一个网格中的行并将它们传输到另一个网格(我猜在实际使用中,它将是“全部复制”).不管怎么说,在服务器端执行似乎是唯一明智的方法,因为涉及到的记录数太多了。谢谢!这并没有解决这个问题。