人人草人人,日本草莓视频在线观看,亚洲五码网站

Kendo UI for jQuery數(shù)據(jù)管理使用教程：狀態(tài)持久性、層次結(jié)構(gòu)

原創(chuàng)|使用教程|編輯：龔雪|2020-03-17 10:17:34.567|閱讀 210 次

概述：Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫(kù)，本文主要介紹如何使用Kendo UI for jQuery數(shù)據(jù)管理中的狀態(tài)持久性、層次結(jié)構(gòu)等。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷售中 >>

相關(guān)鏈接：

Kendo UI for jQuery R1 2020 SP1試用版下載

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ù)。

狀態(tài)持久性

Grid使您可以保存用戶的自定義設(shè)置，并在用戶將來(lái)再次登錄后將其還原。

要保留以前應(yīng)用于其結(jié)構(gòu)的設(shè)置，請(qǐng)使用Grid的getOptions和setOptions方法。這些方法允許您在需要時(shí)序列化Grid的當(dāng)前狀態(tài)，并在以后恢復(fù)該狀態(tài)。

<!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 class="box wide">
<a href="#" class="k-button" id="save">Save State</a>
<a href="#" class="k-button" id="load">Load State</a>
</div>
<div id="grid"></div>

<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
reorderable: true,
resizable: true,
columnMenu: true,
filterable: {
mode: "row"
},
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "ContactName",
title: "Contact Name",
width: 250,
locked: true
}, {
field: "ContactTitle",
title: "Contact Title",
width: 350
}, {
field: "CompanyName",
title: "Company Name",
width: 350
}, {
field: "Country",
width: 450
}]
});

var grid = $("#grid").data("kendoGrid");

$("#save").click(function (e) {
e.preventDefault();
localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());
});

$("#load").click(function (e) {
e.preventDefault();
var options = localStorage["kendo-grid-options"];
if (options) {
grid.setOptions(JSON.parse(options));
}
});
});
</script>
</div>

</body>
</html>

層次結(jié)構(gòu)

Grid通過(guò)以分層方式顯示其表數(shù)據(jù)，提供用于可視化父記錄和子記錄之間關(guān)系的選項(xiàng)。

要在Grid中實(shí)現(xiàn)層次結(jié)構(gòu)，請(qǐng)連接其detailInit事件并根據(jù)父鍵字段值過(guò)濾子表中的記錄。

<!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 element = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 600,
sortable: true,
pageable: true,
detailInit: detailInit,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{
field: "Country",
width: "110px"
},
{
field: "City",
width: "110px"
},
{
field: "Title"
}
]
});
});

function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "OrderID", width: "110px" },
{ field: "ShipCountry", title:"Ship Country", width: "110px" },
{ field: "ShipAddress", title:"Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "300px" }
]
});
}
</script>
</div>

</body>
</html>

掃描關(guān)注慧聚IT微信公眾號(hào)，及時(shí)獲取最新動(dòng)態(tài)及最新資訊