使用EasyUI固定表格的行或列

最新推荐文章于 2022-03-29 15:50:00 发布

chijuanxian0499

最新推荐文章于 2022-03-29 15:50:00 发布

阅读量2.5k

点赞数

文章标签： javascript json ViewUI

原文链接：https://my.oschina.net/u/3348466/blog/857247

版权

在网页中，为了方便查看表格数据，可以使用EasyUI实现表格首行和列的固定。通过创建多个表格或者利用EasyUI的数据网格插件，可以达到类似Excel的固定效果。在EasyUI中，可以通过设置特定的属性如`data-options`和`frozen:true`来实现固定首行和列。当数据加载成功后，调用`freezeRow`方法固定行。示例代码中详细展示了如何配置这些选项。

摘要由CSDN通过智能技术生成

在浏览表格数据时，固定表格首行的标题行或第一列的id或name等字段可以方便查看，然而web中的table却没不像Excel表格那样能够固定行或列，这时通常可以创建多个表格来实现这一需求。

例如，可以将表格首行和内容部分各自创建一个表格，只需要将两个表格相应的列对齐，两个表格紧挨在一起，当内容超出出现滚动条时，表头部分并不会随之滚动，即在形式上实现了固定表格首行，也可以用相同方法实现固定列。

另外，通过使用EasyUI也可以实现固定首行的功能，而且还能实现行和列的同时固定，从EasyUI官网上找到的示例进行了一定的修改，代码如下：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Frozen Rows in DataGrid</title>
        <!--需要在引入jquery.easyui.min.js文件之前先引入jquery-1.11.3.js-->
        <script src="../js/jquery-1.11.3.js"></script>
        <!--实现基本的固定表格行和列功能引入jquery.easyui.js和easyui.css即可-->
        <script src="../js/jquery.easyui.min.js"></script>
        <link rel="stylesheet" type="text/css" href="../style/easyui.css">
    </head>
    <body>
        <h2>Frozen Rows in DataGrid</h2>
        <table class="easyui-datagrid"
               title="Frozen Rows in DataGrid"
               data-options="
				singleSelect: true,
				collapsible: true,
				url: 'datagrid_data.json',
				method: 'get',
				onLoadSuccess: function(){
					$(this).datagrid('freezeRow',0);
				}"
               style="width:440px;height:250px">
            <thead data-options="frozen:true">
            <tr>
                <th

最低0.47元/天解锁文章

chijuanxian0499

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用EasyUI固定表格的行或列

在浏览表格数据时，固定表格首行的标题行或第一列的id或name等字段可以方便查看，然而web中的table却没不像Excel表格那样能够固定行或列，这时通常可以创建多个表格来实现这一需求。例如，可以将表格首行和内容部分各自创建一个表格，只需要将两个表格相应的列对齐，两个表格紧...
复制链接

扫一扫