EXCEL函数tips(4) 数据冻结和查找

9 如何在excel表格中设置冻结某一行或几行窗口？

https://jingyan.baidu.com/article/4e5b3e199a114ad1911e2438.html

想要固定某一行的话，以冻结第四行窗口为例，鼠标点击第五行，点击菜单栏中的【视图】→【冻结窗口】→【冻结拆分窗格】

E10 vlookup+match函数

批量操作

Match函数：查找值区域

击“了解更多”获取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元素内。

Query EasyUI最新试用版免费下载>

本教程演示了如何冻结一些列，当用户在网格上水平移动滚动条时，冻结列不能滚动到视图的外部。

想要定义冻结列，首先您应该定义frozenColumns属性。frozenColumn属性和columns属性是一样的。

$('#tt').datagrid({
title:'Frozen Columns',
iconCls:'icon-save',
width:500,
height:250,
url:'data/datagrid_data.json',
frozenColumns:[[
{field:'itemid',title:'Item ID',width:80},
{field:'productid',title:'Product ID',width:80},
]],
columns:[[
{field:'listprice',title:'List Price',width:80,align:'right'},
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
{field:'attr1',title:'Attribute',width:100},
{field:'status',title:'Status',width:60}
]]
});

您不需要编写任何javascript代码，如下所示，就能创建一个数据网格组件：

Item ID	Product ID
List Price	Unit Cost	Attribute	Stauts

下载该EasyUI示例：easyui-datagrid-demo.zip

购买最新正版授权！"咨询在线客服"

2015岁末扫尾之战！全球厂商携手放利！

本站文章除注明转载外，均为本站原创或翻译

在线咨询

上一篇：Less is more？极简主义在Web设计中的真
下一篇：30 个实例详解 TOP 命令！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

EXCEL函数tips(4) 数据冻结和查找

9 如何在excel表格中设置冻结某一行或几行窗口？

E10 vlookup+match函数

您的项目需求