Web界面开发工具！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: "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>

为了使该功能正常运行，必须提供以下配置设置。它们确保至少一个非锁定列始终可见，并且可以水平滚动非锁定列。如果预期的水平空间不足，则不会出现水平滚动条。

启用滚动。
首先锁定至少一列。
定义网格的高度。
为所有列设置显式像素宽度，允许网格调整已冻结和未冻结表部件的布局。
确保所有锁定列的总宽度等于或小于网格的宽度减去滚动条宽度的三倍。
确保未在隐藏容器内初始化网格。

注意：

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元素内。

了解最新Kendo UI最新资讯，请关注Telerik中文网！

来源：oschina

链接：https://my.oschina.net/u/3992677/blog/3222858

标签

kendo