文檔半島外圍網(wǎng)上直營(yíng)>>Kendo UI使用教程-2019>>Kendo UI for jQuery數(shù)據(jù)管理使用教程：連續(xù)滾動(dòng)
Kendo UI for jQuery數(shù)據(jù)管理使用教程：連續(xù)滾動(dòng)
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四個(gè)控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫(kù)。
當(dāng)您顯示大量項(xiàng)目并使用編輯、分組、過(guò)濾、排序或?qū)哟谓Y(jié)構(gòu)時(shí)，連續(xù)滾動(dòng)非常適合。
網(wǎng)格連續(xù)滾動(dòng)本地?cái)?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ù)滾動(dòng)遠(yuǎn)程數(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 = "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>
入門指南
要啟用連續(xù)滾動(dòng)，請(qǐng)將scrollable.endless屬性設(shè)置為true。
注意：為了使功能正常工作，有兩個(gè)要求：
- 需要一個(gè)垂直滾動(dòng)條
- 網(wǎng)格的高度應(yīng)恒定
當(dāng)網(wǎng)格綁定到本地和遠(yuǎn)程數(shù)據(jù)時(shí)，它們都支持連續(xù)滾動(dòng)：
- 當(dāng)綁定到本地?cái)?shù)據(jù)數(shù)組時(shí)，網(wǎng)格會(huì)將所有項(xiàng)目序列化到客戶端，并且在用戶滾動(dòng)時(shí)，小部件將顯示新項(xiàng)目。
- 當(dāng)綁定到遠(yuǎn)程數(shù)據(jù)時(shí)，網(wǎng)格僅將一頁(yè)的項(xiàng)目序列化。 當(dāng)用戶滾動(dòng)到列表的末尾時(shí)，網(wǎng)格將發(fā)送AJAX請(qǐng)求以獲取下一頁(yè)的項(xiàng)目。 返回?cái)?shù)據(jù)后，網(wǎng)格僅呈現(xiàn)新項(xiàng)目并將其追加到舊項(xiàng)目。
$("#grid").kendoGrid({
scrollable: {
endless: true
},
// Other configuration.
});
與編輯一起使用
與常規(guī)分頁(yè)一樣，連續(xù)滾動(dòng)與編輯方式相似，但是當(dāng)您與編輯一起使用連續(xù)滾動(dòng)并打開一個(gè)項(xiàng)目進(jìn)行編輯時(shí)，即使在請(qǐng)求新頁(yè)面之后，該項(xiàng)目仍將保持打開狀態(tài)。
與分組一起使用
開箱即用，連續(xù)滾動(dòng)與分組一起工作，但是當(dāng)兩個(gè)功能一起使用時(shí)，網(wǎng)格將以以下特定方式運(yùn)行：
- 如果將網(wǎng)格滾動(dòng)到底部，它將請(qǐng)求的項(xiàng)目數(shù)將等于項(xiàng)目數(shù)和頁(yè)面大小。
- 如果最后一組項(xiàng)目被折疊，則網(wǎng)格仍將請(qǐng)求該組中的項(xiàng)目。
- 如果一組項(xiàng)目跨越多個(gè)頁(yè)面，則網(wǎng)格將發(fā)出多個(gè)請(qǐng)求。
- 當(dāng)返回特定的項(xiàng)目子集時(shí)，這些項(xiàng)目將被渲染和隱藏，因?yàn)樵摻M已折疊。 網(wǎng)格將繼續(xù)請(qǐng)求這些項(xiàng)目，直到到達(dá)新的組或直到不存在任何要請(qǐng)求的項(xiàng)目為止。
- 如果網(wǎng)格綁定到遠(yuǎn)程數(shù)據(jù)，請(qǐng)啟用serverGrouping將分組應(yīng)用于所有項(xiàng)目。
與層次結(jié)構(gòu)一起使用
如果網(wǎng)格顯示層次結(jié)構(gòu)數(shù)據(jù)并且展開了某個(gè)項(xiàng)目，則在滾動(dòng)這些項(xiàng)目并請(qǐng)求新頁(yè)面時(shí)，該網(wǎng)格不會(huì)折疊。
注意：篩選、排序和分組操作將重置滾動(dòng)位置。
掃描關(guān)注慧聚IT微信公眾號(hào)，及時(shí)獲取最新動(dòng)態(tài)及最新資訊
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線