使用EasyUI固定表格的行或列

在浏览表格数据时，固定表格首行的标题行或第一列的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 data-options="field:'itemid'">Item ID</th><th data-options="field:'productid'">Product ID</th><th data-options="field:'productname'">Product Name</th></tr></thead><thead><tr><th data-options="field:'listprice'">List Price</th><th data-options="field:'unitcost'">Unit Cost</th><th data-options="field:'attr1'">Attribute</th><th data-options="field:'status'">Status</th></tr></thead></table></body></html>

其中，
       class="easyui-datagrid"为插件为表格设置的样式
       title="Frozen Rows in DataGrid"作为表格标题
       data-options设置表格整体属性，如：
       singleSelect为只能单行选中，
       collapsible整个表格是否可以折叠（点击三角形按钮可进行折叠）
       url为请求的表格数据路径，为json格式
       onLoadSuccess中设置了数据成功加载后freezeRow及将某一行进行固定；
       style中的宽度和高度设置为表格的宽和高，内容超出部分将出现滚动条；

实现的效果为

特别注意的是，thead作为表格标题栏，如果需要设置列固定则要给thead标签添加data-options="frozen:true"属性，即

<thead data-options="frozen:true"><tr><th data-options="field:'itemid'">Item ID</th><th data-options="field:'productid'">Product ID</th><th data-options="field:'productname'">Product Name</th></tr></thead><thead><tr><th data-options="field:'listprice'">List Price</th><th data-options="field:'unitcost'">Unit Cost</th><th data-options="field:'attr1'">Attribute</th><th data-options="field:'status'">Status</th></tr>
</thead>

将出现前三列固定，而

            <thead data-options="frozen:true"><tr><th data-options="field:'itemid'">Item ID</th><th data-options="field:'productid'">Product ID</th><th data-options="field:'productname'">Product Name</th><th data-options="field:'listprice'">List Price</th><th data-options="field:'unitcost'">Unit Cost</th><th data-options="field:'attr1'">Attribute</th><th data-options="field:'status'">Status</th></tr></thead>

没有列会固定。

注：使用的Json数据来自EasyUI官方网站，

{"total": 28,"rows": [{"productid": "FI-SW-01","productname": "Koi","unitcost": 10.00,"status": "P","listprice": 36.50,"attr1": "Large","itemid": "EST-1"},{"productid": "K9-DL-01","productname": "Dalmation","unitcost": 12.00,"status": "P","listprice": 18.50,"attr1": "Spotted Adult Female","itemid": "EST-10"},{"productid": "RP-SN-01","productname": "Rattlesnake","unitcost": 12.00,"status": "P","listprice": 38.50,"attr1": "Venomless","itemid": "EST-11"},{"productid": "RP-SN-01","productname": "Rattlesnake","unitcost": 12.00,"status": "P","listprice": 26.50,"attr1": "Rattleless","itemid": "EST-12"},{"productid": "RP-LI-02","productname": "Iguana","unitcost": 12.00,"status": "P","listprice": 35.50,"attr1": "Green Adult","itemid": "EST-13"},{"productid": "FL-DSH-01","productname": "Manx","unitcost": 12.00,"status": "P","listprice": 158.50,"attr1": "Tailless","itemid": "EST-14"},{"productid": "FL-DSH-01","productname": "Manx","unitcost": 12.00,"status": "P","listprice": 83.50,"attr1": "With tail","itemid": "EST-15"},{"productid": "FL-DLH-02","productname": "Persian","unitcost": 12.00,"status": "P","listprice": 23.50,"attr1": "Adult Female","itemid": "EST-16"},{"productid": "FL-DLH-02","productname": "Persian","unitcost": 12.00,"status": "P","listprice": 89.50,"attr1": "Adult Male","itemid": "EST-17"},{"productid": "AV-CB-01","productname": "Amazon Parrot","unitcost": 92.00,"status": "P","listprice": 63.50,"attr1": "Adult Male","itemid": "EST-18"}]
}

转载于:https://my.oschina.net/u/3348466/blog/857247

使用EasyUI固定表格的行或列相关推荐

android webservices 返回多行多列数据,NoahWeb实现表格多行多列
用NoahWeb的表现层指令可以在动态生成的页面中非常容易的实现多行多列的表格.在正式学习以前我们需要先来了解一下怎么用NoahWeb的表现层来做动态内容显示. 在NoahWeb设计器中新建或打开一项 ...
php html转成数组,PHP_php将HTML表格每行每列转为数组实现采集表格数据的方法，本文实例讲述了php将HTML表格每 - phpStudy...
php将HTML表格每行每列转为数组实现采集表格数据的方法本文实例讲述了php将HTML表格每行每列转为数组实现采集表格数据的方法.分享给大家供大家参考.具体如下: 下面的php代码可以将HTML表 ...
python xlsx表格最大行最大列
xlsx表格最大行最大列其实就是.max_row和.max_column 直接上代码,一眼就看懂! import openpyxl def run():file = '曲某某_MedicalReco ...
table表格实现行、列冻结
客户要求实现对表格数据的头几行或者头几列进行冻结,即滚动时保持这几行/列不动,通过网上查找代码,参考已有的代码的思路,实现了可以任意对行.列进行冻结. 实现原理: 创建多个div,div之间通过css ...
固定表格第一行(表头固定)，其他行可以上下滚动
本文来源:http://bbs.okajax.com/thread-2482-1-1.html 固定表格第一行,其他行可以上下滚动固定表格第一行,其他行可以上下滚动表格.在开发中非常有用.比如 ...
vue项目 element表格数据行转列数据互转
后台返回的格式一个人名里面带有这个人的所有信息,我们需要数据转化 ( 俗称行转列 ) 这个平时可以用在时间日期上比较多,这个案例只是把这个写法记录下来 <template><div ...
如何以厘米为单位精确设置Excel表格的行高列宽？
转载自品略图书馆 http://www.pinlue.com/article/2020/03/2714/4610059349259.html 各位朋友,大家好. 先普及下在excel里面行高和列宽的 ...
html tr固定行高列宽,HTML表格固定格式：行高列宽
在开发的过的久请屏气实近时后求蔽风现近时后求蔽风现程中,有些表格对于客户来说是必须固定的,然而table的列宽和行高很难保持不变,在网上找了很多资料,都不是很好,但是从Excel导出的html时就是严 ...
06 - table表格标签+ 行合并+列合并
1.table 表格标签属性在小程序中查看 cellspacing="0" 表格边框合并: 表格:table 行:tr 列:td 属性: ...
Latex 表格多行多列
http://blog.sina.com.cn/s/blog_758baa8d01016p7r.html 转载来源:http://jhengjyun.blogspot.hk/2011/01/latex ...

使用EasyUI固定表格的行或列

使用EasyUI固定表格的行或列相关推荐

最新文章

热门文章