文檔金喜正規買球>>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庫。
自定義列命令
您可以實現用于處理Grid記錄的自定義命令。要包含一個命令列，該列將在列單元格中呈現一個用于觸發命令的按鈕：
- 通過列定義指定按鈕的文本。
- 將按鈕的click事件連接到JavaScript函數，該函數將接收相應的Grid數據項作為參數。
- 在函數定義中，處理命令。
有關可運行的示例，請參閱有關在Grid中實現自定義命令的演示：
<!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>
<div id=”details”></div>
<script>
var wnd,
detailsTemplate;
$(document).ready(function () {
var grid = $(“#grid”).kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
pageable: true,
height: 550,
columns: [
{ field: “FirstName”, title: “First Name”, width: “140px” },
{ field: “LastName”, title: “Last Name”, width: “140px” },
{ field: “Title” },
{ command: { text: “View Details”, click: showDetails }, title: ” “, width: “180px” }]
}).data(“kendoGrid”);
wnd = $(“#details”)
.kendoWindow({
title: “Customer Details”,
modal: true,
visible: false,
resizable: false,
width: 300
}).data(“kendoWindow”);
detailsTemplate = kendo.template($(“#template”).html());
});
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest(“tr”));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
}
</script>
<script type=”text/x-kendo-template” id=”template”>
<div id=”details-container”>
<h2>#= FirstName # #= LastName #</h2>
<em>#= Title #</em>
<dl>
<dt>City: #= City #</dt>
<dt>Birth Date: #= kendo.toString(BirthDate, “MM/dd/yyyy”) #</dt>
</dl>
</div>
</script>
<style type=”text/css”>
#details-container
{
padding: 10px;
}
#details-container h2
{
margin: 0;
}
#details-container em
{
color: #8c8c8c;
}
#details-container dt
{
margin:0;
display: inline;
}
</style>
</div>
</body>
</html>
列虛擬化
網格提供用于虛擬化其列的內置選項。 要啟用它，請將scollable.virtual屬性設置為“ columns”。結果，將不會呈現網格當前可見的aria之外的列，這將改善呈現性能。 當執行滾動時，列的可視子集會相應更改。
注意：為了正常工作，列虛擬化要求您設置columns.width。
要啟用虛擬列：
$("#grid").kendoGrid({
scrollable: {
virtual: "columns"
}
});
要同時啟用虛擬列和行：
$("#grid").kendoGrid({
scrollable: {
virtual: "rows, columns"
}
});
掃描關注慧聚IT微信公眾號，及時獲取最新動態及最新資訊
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線