Question

在我的一个应用程序中，由于在Kendo Ui网格中绑定了50万条记录，所以看到浏览器挂起并崩溃。网格包含总共20列，所有数据都通过剑道网格中的角度从webapi返回。

它适用于3列，当更改为15列时，它会在100k以上的记录中出现问题。

所以我需要测试可以在kendo网格上保留多少列和记录。我发现在kendo中有一些选项称为虚拟化来加载批量记录。

演示网站是：http://dojo.telerik.com/@sahir/OSeRo

所以在人们有js的数据中，我试图在该文件中添加两列我在列中获取对象对象。

在kendo网格中没有分页的情况下，问题发生在100k以上的记录绑定之上。我在下面附上了一个演示项目截图，用于测试网格。

代码如下：

<!DOCTYPE html>
<html>
<head>
    <base href="">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
    <script src="people.js" ></script>
</head>
<body>
<!--<script src="../content/shared/js/people.js"></script>-->


<div id="example">
    <div id="message" class="box wide"></div>

    <div id="grid"></div>

    <script>
        $(function() {
            var count = 500000;

            if (kendo.support.browser.msie) {
                if (kendo.support.browser.version < 10) {
                    count = 100000;
                } else {
                    count = 200000;
                }
            }

            $("#message").text(kendo.format("Generating {0} items", count));

            generatePeople(count, function(data) {
                var initStart;
                var renderStart;

                $("#message").text("");

                setTimeout(function() {
                    initStart = new Date();

                    $("#grid").kendoGrid({
                        dataSource: {
                            data: data,
                            pageSize: 20
                        },
                        height: 543,
                        scrollable: {
                            virtual: true
                        },
                        pageable: {
                            numeric: false,
                            previousNext: false,
                            messages: {
                                display: "Showing {2} data items"
                            }
                        },
                        columns: [
                            { field: "Id", title: "ID", width: "110px" },
                            { field: "FirstName", title: "First Name", width: "130px" },
                            { field: "LastName", title: "Last Name", width: "130px" },
                            { field: "City", title: "City", width: "130px" },
                            { field: "CashId", title: "Cash ID", width: "130px" },
                            { field: "Title" },
                            { field: "productName"},

                        ]
                    });

                    initEnd = new Date();

                    $("#message").text(kendo.format("Kendo UI Grid bound to {0} items in {1} milliseconds", count, initEnd - initStart));
                });
            });
        });
    </script>
</div>


</body>
</html>

自定义people.js

var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"],
    lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"],
    cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"],
    titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
    "Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"],

 productNames =["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"]
    birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")],
    cashId= ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
    "Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"];
function createRandomData(count) {
    var data = [],
        now = new Date();
    for (var i = 0; i < count; i++) {
        var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
            lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
            city = cities[Math.floor(Math.random() * cities.length)],
            title = titles[Math.floor(Math.random() * titles.length)],
            birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
            CashId  = cashId[Math.floor(Math.random() * cashId.length)],
            age = now.getFullYear() - birthDate.getFullYear(),
            productName  = productNames[Math.floor(Math.random() * productNames.length)];

        data.push({
            Id: i + 1,
            FirstName: firstName,
            LastName: lastName,
            City: city,
            Title: title,
            BirthDate: birthDate,
            CashId:cashId,
            Age: age,
            productName:productNames

        });
    }
    console.log(data);
    return data;
}

function generatePeople(itemCount, callback) {
    var data = [],
        delay = 25,
        interval = 500,
        starttime;

    var now = new Date();
    setTimeout(function() {
        starttime = +new Date();
        do {
            var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
                lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
                city = cities[Math.floor(Math.random() * cities.length)],
                title = titles[Math.floor(Math.random() * titles.length)],

                birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
                CashId=  cashId[Math.floor(Math.random() * cashId.length)],
                age = now.getFullYear() - birthDate.getFullYear(),            
                productName  = productNames[Math.floor(Math.random() * productNames.length)];
            data.push({
                Id: data.length + 1,
                FirstName: firstName,
                LastName: lastName,
                City: city,
                Title: title,
                BirthDate: birthDate,
                CashId:cashId,
                Age: age,
                productName:productNames

            });
        } while(data.length < itemCount && +new Date() - starttime < interval);

        if (data.length < itemCount) {
            setTimeout(arguments.callee, delay);
        } else {
            callback(data);
        }
    }, delay);
}

Answer 1

第68行（people.js至cashId）和70（CashId至productNames）

更新productName

data.push({
    Id: data.length + 1,
    FirstName: firstName,
    LastName: lastName,
    City: city,
    Title: title,
    BirthDate: birthDate,
    CashId:CashId,
    Age: age,
    productName:productName

});

kendo网格在列中显示[对象对象]而没有用于虚拟化的分页

1 个答案: