文檔半島外圍網上直營>>Kendo UI使用教程-2019>>Kendo UI for jQuery數據管理使用教程：鎖定列
Kendo UI for jQuery數據管理使用教程：鎖定列
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四個控件。Kendo UI for jQuery是創建現代Web應用程序的最完整UI庫。
鎖定（凍結）列使您可以在用戶水平滾動網格時始終顯示特定列。
有關可運行的示例，可參閱有關在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>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://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>
為了使該功能正常運行，必須提供以下配置設置。 它們確保至少一個非鎖定列始終可見，并且可以水平滾動非鎖定列。 如果預期的水平空間不足，則不會出現水平滾動條。
- 啟用滾動。
- 首先鎖定至少一列。
- 定義網格的高度。
- 為所有列設置顯式像素寬度，允許網格調整已凍結和未凍結表部件的布局。
- 確保所有鎖定列的總寬度等于或小于網格的寬度減去滾動條寬度的三倍。
- 確保未在隱藏容器內初始化網格。
注意：
- Grid的JavaScript API允許您動態鎖定和解鎖列。 但是，只有在初始化期間至少鎖定一列時，才有可能這樣做。 應用凍結的列時，網格的HTML輸出和腳本操作是不同的，這就是初始化后小部件無法在凍結和未凍結模式之間切換的原因。
- 鎖定的列只能位于網格的左側，不支持將它們放置在右側。
- 行模板和詳細信息功能不與鎖定列結合使用，如果使用多列標題，則只能將列鎖定在最頂層。
鎖定的列無法觸摸滾動，因為它們被封裝在一個具有溢出：隱藏樣式的容器中。 要解決臺式機設備上的此限制，請使用mousewheel事件。 但是，觸摸設備不存在任何解決方法。
鎖定列依賴于同步網格的凍結和非凍結部分的行高，某些瀏覽器（例如Internet Explorer 9和Firefox）要求以像素為單位設置行高樣式。 否則，由于子像素問題，同步可能無法正常工作。
div.k-grid td
{
line-height: 18px;
}
當您實現自定義代碼并依靠選擇器或以Grid表為目標時，Grid為其鎖定和可滾動部分創建單獨的表。 鎖定列位于.k-grid-content-locked元素內，而可滾動內容位于.k-grid-content元素內。
掃描關注慧聚IT微信公眾號，及時獲取最新動態及最新資訊
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線