KendoUI网格优化

时间:2015-01-07 09:23:15

标签: jquery optimization kendo-ui kendo-grid kendo-asp.net-mvc

我有两个名为:

的剑道网格
var sourcegrid = $('#usersGrid').data("kendoGrid");        //SOURCE GRID
var destinationgrid = $('#teamGrid').data('kendoGrid');    //DESTINATION GRID

在sourcegrid中,我有1000条记录,而在destinationgrid中没有记录。

我有一个将数据从sourcegrid传输到destinationgrid的按钮。

代码:

 sourcegrid.select().each(function () {
        var dataItem = sourcegrid.dataItem($(this));
        destinationgrid.dataSource.add(dataItem);
        sourcegrid.removeRow($(this));
    });

当我将500条记录传输到destinationgrid时。转移的过程就是如此 慢。任何优化它的想法。

由于

你可以编辑它    http://jsfiddle.net/2qXKy/112/

1 个答案:

答案 0 :(得分:1)

这是我为你加快速度的尝试:

http://jsfiddle.net/5t5c2g1y/2/

var ds1 = new kendo.data.DataSource( {
    data: createRandomData(500),
    scrollable: true,
    schema: {
        model: {
            id: "id",
            fields: {
                id: {
                    type: 'number',
                    editable: true
                },
                FirstName: {
                    type: 'string',
                    editable: true
                },
                LastName: {
                    type: 'string',
                    editable: true
                }
            }
        }
    }
});

var ds2 = new kendo.data.DataSource({
    data: createRandomData(0),
    scrollable: true,
    schema: {
        model: {
            id: "id",
            fields: {
                id: {
                    type: 'number',
                    editable: true
                },
                FirstName: {
                    type: 'string',
                    editable: true
                },
                LastName: {
                    type: 'string',
                    editable: true
                }
            }
        }
    }
});

var sourcegrid = $("#usersGrid").kendoGrid({
    dataSource: ds1,
    editable: "popup",
    selectable: "multiple",
    pageable: false,
    columns: [{
        field: "FirstName",
        width: 90,
        title: "First Name"
    }, {
        field: "LastName",
        width: 90,
        title: "Last Name"
    }]
}).data("kendoGrid");

var destinationgrid = $("#teamGrid").kendoGrid({
    dataSource: ds2,
    editable: "popup",
    selectable: "multiple",
    pageable: false,
    columns: [{
        field: "FirstName",
        width: 90,
        title: "First Name"
    }, {
        field: "LastName",
        width: 90,
        title: "Last Name"
    }]
}).data("kendoGrid");


$('input[type=button]').on('click',function() {
    var removalList = []; 
    sourcegrid.select().each(function () {

        var dataItem = sourcegrid.dataItem($(this));
        console.log(dataItem);
        removalList.push(dataItem)
        ds2.add(dataItem);


    });

   for(var i = 0; i< removalList.length;i++)
   {
       ds1.remove(removalList[i]);
   }

});

如果您与数据源而不是网格本身进行交互,您将希望看到该过程更快(并且除去要求您确认删除的弹出消息)

您会注意到我添加了一个控制台语句,以便您可以看到正在复制的信息。

再次希望这会有所帮助。