내 응용 프로그램 중 하나에서 검도 Ui 그리드의 500 000 레코드를 바인딩하기 때문에 브라우저가 멈추거나 충돌하는 것을 보았습니다. 그리드에는 총 20 개의 열이 포함되어 있고 모든 데이터는 검도 그리드의 각도를 통해 webapi에서 반환됩니다.가상화를위한 페이지 매김없이 열에 [object Object]를 표시하는 검도 격자
3 열에 대해서는 정상적으로 작동하고 15 열로 변경하면 100k를 초과하는 레코드에 문제가 발생합니다.
그래서 검도 그리드에서 얼마나 많은 열과 레코드를 보유 할 수 있는지 테스트해야합니다. 검도에서 대량 레코드를로드하는 데 가상화라고하는 몇 가지 옵션이 있음을 발견했습니다.
데모 사이트는 다음과 같습니다
http://dojo.telerik.com/@sahir/OSeRo 그래서 JS 데이터를 가지고있는 사람, 내가 열에 개체 개체를 얻고 해당 파일 내부에 두 개의 열을 추가하기 위해 노력했다.
검도 그리드에서 페이지 매김없이 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);
}
감사합니다. –