文檔首頁>>Kendo UI使用教程-2019>>Kendo UI for jQuery數(shù)據(jù)管理使用教程：鎖定列

Kendo UI for jQuery數(shù)據(jù)管理使用教程：鎖定列

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

鎖定（凍結(jié)）列使您可以在用戶水平滾動(dòng)網(wǎng)格時(shí)始終顯示特定列。

有關(guān)可運(yùn)行的示例，可參閱有關(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>
<div id="example">
<div id="grid"></div>

<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipCountry: { type: "string" },
ShipName: { type: "string" },
ShipCity: { type: "string" },
ShipAddress: { type: "string" }
}
}
},
pageSize: 30
},
height: 540,
sortable: true,
reorderable: true,
groupable: true,
resizable: true,
filterable: true,
columnMenu: true,
pageable: true,
columns: [ {
field: "OrderID",
title: "Order ID",
locked: true,
lockable: false,
width: 150
}, {
field: "ShipCountry",
title: "Ship Country",
width: 300
}, {
field: "ShipCity",
title: "Ship City",
width: 300
},{
field: "ShipName",
title: "Ship Name",
locked: true,
width: 300
}, {
field: "ShipAddress",
lockable: false,
width: 400
}
]
});
});
</script>
</div>

</body>
</html>

為了使該功能正常運(yùn)行，必須提供以下配置設(shè)置。它們確保至少一個(gè)非鎖定列始終可見，并且可以水平滾動(dòng)非鎖定列。如果預(yù)期的水平空間不足，則不會(huì)出現(xiàn)水平滾動(dòng)條。

啟用滾動(dòng)。
首先鎖定至少一列。
定義網(wǎng)格的高度。
為所有列設(shè)置顯式像素寬度，允許網(wǎng)格調(diào)整已凍結(jié)和未凍結(jié)表部件的布局。
確保所有鎖定列的總寬度等于或小于網(wǎng)格的寬度減去滾動(dòng)條寬度的三倍。
確保未在隱藏容器內(nèi)初始化網(wǎng)格。

注意：

Grid的JavaScript API允許您動(dòng)態(tài)鎖定和解鎖列。但是，只有在初始化期間至少鎖定一列時(shí)，才有可能這樣做。應(yīng)用凍結(jié)的列時(shí)，網(wǎng)格的HTML輸出和腳本操作是不同的，這就是初始化后小部件無法在凍結(jié)和未凍結(jié)模式之間切換的原因。
鎖定的列只能位于網(wǎng)格的左側(cè)，不支持將它們放置在右側(cè)。
行模板和詳細(xì)信息功能不與鎖定列結(jié)合使用，如果使用多列標(biāo)題，則只能將列鎖定在最頂層。

鎖定的列無法觸摸滾動(dòng)，因?yàn)樗鼈儽环庋b在一個(gè)具有溢出：隱藏樣式的容器中。要解決臺(tái)式機(jī)設(shè)備上的此限制，請(qǐng)使用mousewheel事件。但是，觸摸設(shè)備不存在任何解決方法。

鎖定列依賴于同步網(wǎng)格的凍結(jié)和非凍結(jié)部分的行高，某些瀏覽器（例如Internet Explorer 9和Firefox）要求以像素為單位設(shè)置行高樣式。否則，由于子像素問題，同步可能無法正常工作。

div.k-grid td
{
line-height: 18px;
}

當(dāng)您實(shí)現(xiàn)自定義代碼并依靠選擇器或以Grid表為目標(biāo)時(shí)，Grid為其鎖定和可滾動(dòng)部分創(chuàng)建單獨(dú)的表。鎖定列位于.k-grid-content-locked元素內(nèi)，而可滾動(dòng)內(nèi)容位于.k-grid-content元素內(nèi)。

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

Kendo UI for jQuery數(shù)據(jù)管理使用教程：鎖定列

用科技創(chuàng)就卓越

Create excellence with technology