文檔金喜正規買球>>Kendo UI使用教程-2019>>Kendo UI for jQuery數據管理使用教程：連續滾動
Kendo UI for jQuery數據管理使用教程：連續滾動
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是創建現代Web應用程序的最完整UI庫。
當您顯示大量項目并使用編輯、分組、過濾、排序或層次結構時，連續滾動非常適合。
網格連續滾動本地數據的演示：
<!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>
網格連續滾動遠程數據的演示：
<!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 = "http://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://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>
入門指南
要啟用連續滾動，請將scrollable.endless屬性設置為true。
注意：為了使功能正常工作，有兩個要求：
- 需要一個垂直滾動條
- 網格的高度應恒定
當網格綁定到本地和遠程數據時，它們都支持連續滾動：
- 當綁定到本地數據數組時，網格會將所有項目序列化到客戶端，并且在用戶滾動時，小部件將顯示新項目。
- 當綁定到遠程數據時，網格僅將一頁的項目序列化。 當用戶滾動到列表的末尾時，網格將發送AJAX請求以獲取下一頁的項目。 返回數據后，網格僅呈現新項目并將其追加到舊項目。
$("#grid").kendoGrid({
scrollable: {
endless: true
},
// Other configuration.
});
與編輯一起使用
與常規分頁一樣，連續滾動與編輯方式相似，但是當您與編輯一起使用連續滾動并打開一個項目進行編輯時，即使在請求新頁面之后，該項目仍將保持打開狀態。
與分組一起使用
開箱即用，連續滾動與分組一起工作，但是當兩個功能一起使用時，網格將以以下特定方式運行：
- 如果將網格滾動到底部，它將請求的項目數將等于項目數和頁面大小。
- 如果最后一組項目被折疊，則網格仍將請求該組中的項目。
- 如果一組項目跨越多個頁面，則網格將發出多個請求。
- 當返回特定的項目子集時，這些項目將被渲染和隱藏，因為該組已折疊。 網格將繼續請求這些項目，直到到達新的組或直到不存在任何要請求的項目為止。
- 如果網格綁定到遠程數據，請啟用serverGrouping將分組應用于所有項目。
與層次結構一起使用
如果網格顯示層次結構數據并且展開了某個項目，則在滾動這些項目并請求新頁面時，該網格不會折疊。
注意：篩選、排序和分組操作將重置滾動位置。
掃描關注慧聚IT微信公眾號，及時獲取最新動態及最新資訊
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線