发布时间：2020-04-03
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: “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>
为了使该功能正常运行，必须提供以下配置设置。 它们确保至少一个非锁定列始终可见，并且可以水平滚动非锁定列。 如果预期的水平空间不足，则不会出现水平滚动条。
注意：
锁定的列无法触摸滚动，因为它们被封装在一个具有溢出：隐藏样式的容器中。 要解决台式机设备上的此限制，请使用mousewheel事件。 但是，触摸设备不存在任何解决方法。
锁定列依赖于同步网格的冻结和非冻结部分的行高，某些浏览器（例如Internet Explorer 9和Firefox）要求以像素为单位设置行高样式。 否则，由于子像素问题，同步可能无法正常工作。
div.k-grid td
{
line-height: 18px;
}
当您实现自定义代码并依靠选择器或以Grid表为目标时，Grid为其锁定和可滚动部分创建单独的表。 锁定列位于.k-grid-content-locked元素内，而可滚动内容位于.k-grid-content元素内。
了解最新Kendo UI最新资讯，请关注Telerik中文网！
扫描关注慧聚IT微信公众号，及时获取最新动态及最新资讯
023-68661681
返回