日韩国va在线视频,日韩福利在线视频,日日日干干干

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

原創(chuàng)|使用教程|編輯：龔雪|2020-04-03 09:33:26.663|閱讀 218 次

概述：本文主要為大家介紹鎖定（凍結(jié)）列使您可以在用戶水平滾動網(wǎng)格時始終顯示特定列。

相關(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四個控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫。

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

有關(guān)可運行的示例，可參閱有關(guān)在Grid中實現(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: "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>

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

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

注意：

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

鎖定的列無法觸摸滾動，因為它們被封裝在一個具有溢出：隱藏樣式的容器中。要解決臺式機設(shè)備上的此限制，請使用mousewheel事件。但是，觸摸設(shè)備不存在任何解決方法。

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