文檔首頁>>Kendo UI使用教程-2019>>Kendo UI for jQuery數(shù)據(jù)管理使用教程：連續(xù)滾動
Kendo UI for jQuery數(shù)據(jù)管理使用教程：連續(xù)滾動
Kendo UI for jQuery R1 2020 SP2試用版下載
Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫。
當您顯示大量項目并使用編輯、分組、過濾、排序或?qū)哟谓Y(jié)構(gòu)時，連續(xù)滾動非常適合。
網(wǎng)格連續(xù)滾動本地數(shù)據(jù)的演示：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<script src="../content/shared/js/people.js"></script>
<div id="example">
<div id="grid"></div>
<script>
$(function () {
var count = 5000;
if (kendo.support.browser.msie) {
if (kendo.support.browser.version < 10) {
count = 1000;
} else {
count = 2000;
}
}
$("#message").text(kendo.format("Generating {0} items", count));
generatePeople(count, function (data) {
var initStart;
var renderStart;
var lastId;
$("#message").text("");
setTimeout(function () {
initStart = new Date();
lastId = data.length;
$("#grid").kendoGrid({
dataSource: {
data: data,
pageSize: 20,
schema: {
model: {
id: "Id",
fields: {
FirstName: { type: "string" },
LastName: { type: "string" },
City: { type: "string" },
Age: { type: "number" },
BirthDate: { editable: false },
Title: { type: "string" }
}
}
}
},
groupable: true,
sortable: true,
height: 550,
scrollable: {
endless: true
},
save: function (e) {
if (e.model.isNew()) {
lastId++;
e.model.set("Id", lastId);
}
},
pageable: {
numeric: false,
previousNext: false,
messages: {
display: "Showing {2} data items"
}
},
editable: {
mode: 'inline',
},
toolbar: ["create"],
columns: [
{ field: "FirstName", title: "First Name", width: "130px" },
{ field: "LastName", title: "Last Name", width: "130px" },
{ field: "City", title: "City", width: "130px" },
{ field: "Title", width: "130px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }
]
});
initEnd = new Date();
$("#message").text(kendo.format("Kendo UI Grid bound to {0} items in {1} milliseconds", count, initEnd - initStart));
});
});
});
</script>
</div>
</body>
</html>
網(wǎng)格連續(xù)滾動遠程數(shù)據(jù)的演示：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
return kendo.data.transports["odata"].parameterMap(options, operation);
}
},
pageSize: 20,
type: "odata",
batch: true,
serverPaging: true,
serverSorting: true,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1 } },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
},
data: function (response) {
return response.d ? response.d.results: response;
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
height: 550,
sortable: true,
scrollable: {
endless: true
},
pageable: {
numeric: false,
previousNext: false
},
editable: "inline",
toolbar: ["create"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }]
});
});
</script>
</div>
</body>
</html>
入門指南
要啟用連續(xù)滾動，請將scrollable.endless屬性設(shè)置為true。
注意：為了使功能正常工作，有兩個要求：
- 需要一個垂直滾動條
- 網(wǎng)格的高度應(yīng)恒定
當網(wǎng)格綁定到本地和遠程數(shù)據(jù)時，它們都支持連續(xù)滾動：
- 當綁定到本地數(shù)據(jù)數(shù)組時，網(wǎng)格會將所有項目序列化到客戶端，并且在用戶滾動時，小部件將顯示新項目。
- 當綁定到遠程數(shù)據(jù)時，網(wǎng)格僅將一頁的項目序列化。 當用戶滾動到列表的末尾時，網(wǎng)格將發(fā)送AJAX請求以獲取下一頁的項目。 返回數(shù)據(jù)后，網(wǎng)格僅呈現(xiàn)新項目并將其追加到舊項目。
$("#grid").kendoGrid({
scrollable: {
endless: true
},
// Other configuration.
});
與編輯一起使用
與常規(guī)分頁一樣，連續(xù)滾動與編輯方式相似，但是當您與編輯一起使用連續(xù)滾動并打開一個項目進行編輯時，即使在請求新頁面之后，該項目仍將保持打開狀態(tài)。
與分組一起使用
開箱即用，連續(xù)滾動與分組一起工作，但是當兩個功能一起使用時，網(wǎng)格將以以下特定方式運行：
- 如果將網(wǎng)格滾動到底部，它將請求的項目數(shù)將等于項目數(shù)和頁面大小。
- 如果最后一組項目被折疊，則網(wǎng)格仍將請求該組中的項目。
- 如果一組項目跨越多個頁面，則網(wǎng)格將發(fā)出多個請求。
- 當返回特定的項目子集時，這些項目將被渲染和隱藏，因為該組已折疊。 網(wǎng)格將繼續(xù)請求這些項目，直到到達新的組或直到不存在任何要請求的項目為止。
- 如果網(wǎng)格綁定到遠程數(shù)據(jù)，請啟用serverGrouping將分組應(yīng)用于所有項目。
與層次結(jié)構(gòu)一起使用
如果網(wǎng)格顯示層次結(jié)構(gòu)數(shù)據(jù)并且展開了某個項目，則在滾動這些項目并請求新頁面時，該網(wǎng)格不會折疊。
注意：篩選、排序和分組操作將重置滾動位置。
了解最新Kendo UI最新資訊，請關(guān)注Telerik中文網(wǎng)！
掃描關(guān)注慧聚IT微信公眾號，及時獲取最新動態(tài)及最新資訊
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號
提供CDN加速/云存儲服務(wù)
客服熱線