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微信公眾號，及時獲取最新動態及最新資訊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：慧都網
半島外圍網上直營 
11次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線