• <menu id="w2i4a"></menu>
  •
    logo Kendo UI使用教程-2019
    文檔首頁(yè)>>Kendo UI使用教程-2019>>Kendo UI for jQuery數(shù)據(jù)管理使用教程：自定義列命令 & 列虛擬化

    Kendo UI for jQuery數(shù)據(jù)管理使用教程：自定義列命令 & 列虛擬化

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

    自定義列命令

    您可以實(shí)現(xiàn)用于處理Grid記錄的自定義命令。要包含一個(gè)命令列，該列將在列單元格中呈現(xiàn)一個(gè)用于觸發(fā)命令的按鈕：

    1. 通過(guò)列定義指定按鈕的文本。
    2. 將按鈕的click事件連接到JavaScript函數(shù)，該函數(shù)將接收相應(yīng)的Grid數(shù)據(jù)項(xiàng)作為參數(shù)。
    3. 在函數(shù)定義中，處理命令。

    有關(guān)可運(yùn)行的示例，請(qǐng)參閱有關(guān)在Grid中實(shí)現(xiàn)自定義命令的演示： 

    <!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>

    列虛擬化

    網(wǎng)格提供用于虛擬化其列的內(nèi)置選項(xiàng)。 要啟用它，請(qǐng)將scollable.virtual屬性設(shè)置為“ columns”。結(jié)果，將不會(huì)呈現(xiàn)網(wǎng)格當(dāng)前可見(jiàn)的aria之外的列，這將改善呈現(xiàn)性能。 當(dāng)執(zhí)行滾動(dòng)時(shí)，列的可視子集會(huì)相應(yīng)更改。

    注意：為了正常工作，列虛擬化要求您設(shè)置columns.width。

    要啟用虛擬列： 


    $("#grid").kendoGrid({
scrollable: {
virtual: "columns"
}
});


    要同時(shí)啟用虛擬列和行： 


    $("#grid").kendoGrid({
scrollable: {
virtual: "rows, columns"
}
});



    了解最新Kendo UI最新資訊，請(qǐng)關(guān)注Telerik中文網(wǎng)！

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

    慧聚IT微信公眾號(hào)
    掃碼咨詢


    添加微信 立即咨詢

    電話咨詢

    客服熱線
    023-68661681

    TOP
    三级成人熟女影院,欧美午夜成人精品视频,亚洲国产成人乱色在线观看,色中色成人论坛 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();