实现原理：
创建多个div，div之间通过css实现层叠，每个div放置当前表格的克隆。例如：需要行冻结时，创建存放冻结行表格的div，通过设置z-index属性和position属性，让冻结行表格在数据表格的上层。同理，需要列冻结时，创建存放冻结列表格的div，并放置在数据表格的上层。如果需要行列都冻结时，则除了创建冻结行、冻结列表格的div，还需要创建左上角的固定行列表格的div，并放置在所有div的最上层。
处理表格的滚动事件，在表格横向或者纵向滚动时，同时让相应的冻结行和冻结列也同步滚动。
说明：
首先在最外层创建一个最大的Layer的DIV用来承载以下的DIV：
冻结行列的插件设置，如果单纯冻结某行或者某列，那么总共需要创建两个DIV便可以实现；如果行列同时冻结，则需要创建四个DIV实现。
例如，此处需要行列同时冻结，则生成的页面代码如下结构：
使用操作：
1》》》先定义冻结行列的JS代码
freezeTable.js
1 /* 2 * 锁定表头和列 3 * 4 * 参数定义 5 * table - 要锁定的表格元素或者表格ID 6 * freezeRowNum - 要锁定的前几行行数，如果行不锁定，则设置为0 7 * freezeColumnNum - 要锁定的前几列列数，如果列不锁定，则设置为0 8 * width - 表格的滚动区域宽度 9 * height - 表格的滚动区域高度 10 */ 11 function freezeTable(table, freezeRowNum, freezeColumnNum, width, height) { 12 13 //获取冻结行数或者列数 14 if (typeof(freezeRowNum) == 'string') 15 freezeRowNum = parseInt(freezeRowNum) 16 17 if (typeof(freezeColumnNum) == 'string') 18 freezeColumnNum = parseInt(freezeColumnNum) 19 //获取table 20 var tableId; 21 if (typeof(table) == 'string') { 22 tableId = table; 23 table = $('#' + tableId); 24 } else 25 tableId = table.attr('id'); 26 27 /** 28 * 生成最外层的DIV用来承载内部的四个DIV 29 */ 30 var divTableLayout = $("#" + tableId + "_tableLayout"); 31 32 if (divTableLayout.length != 0) { 33 divTableLayout.before(table); 34 divTableLayout.empty(); 35 } else { 36 table.after("<div id='" + tableId + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>"); 37 38 divTableLayout = $("#" + tableId + "_tableLayout"); 39 } 40 41 /** 42 * 根据需要页面table定义的属性 需要冻结的行或者列 ，对应的拼接字符串用于生成不同的DIV 【如果行列同时冻结：生成总共四个DIV】【单独冻结行或列，仅需要生成两个DIV】 43 * 这个四个DIV都是包括数据在内，完全克隆了原本的table， 44 */ 45 var html = ''; 46 if (freezeRowNum > 0 && freezeColumnNum > 0) 47 html += '<div id="' + tableId + '_tableFix" style="padding: 0px;"></div>'; 48 49 if (freezeRowNum > 0) 50 html += '<div id="' + tableId + '_tableHead" style="padding: 0px;"></div>'; 51 52 if (freezeColumnNum > 0) 53 html += '<div id="' + tableId + '_tableColumn" style="padding: 0px;"></div>'; 54 55 html += '<div id="' + tableId + '_tableData" style="padding: 0px;"></div>'; 56 57 //将div追加到页面 58 $(html).appendTo("#" + tableId + "_tableLayout"); 59 60 var divTableFix = freezeRowNum > 0 && freezeColumnNum > 0 ? $("#" + tableId + "_tableFix") : null; 61 var divTableHead = freezeRowNum > 0 ? $("#" + tableId + "_tableHead") : null; 62 var divTableColumn = freezeColumnNum > 0 ? $("#" + tableId + "_tableColumn") : null; 63 var divTableData = $("#" + tableId + "_tableData"); //位于最底层的【数据DIV】【第一个DIV，也就是原本的那个真身】 64 65 divTableData.append(table); 66 //行列同时冻结生成的【行列DIV】【第二个DIV】，一般位于左上角重叠部分 67 if (divTableFix != null) { 68 var tableFixClone = table.clone(true); //克隆1 69 tableFixClone.attr("id", tableId + "_tableFixClone"); 70 divTableFix.append(tableFixClone); 71 } 72 //行冻结生成的【冻结行DIV】【第三个DIV】 73 if (divTableHead != null) { 74 var tableHeadClone = table.clone(true);//克隆2 75 tableHeadClone.attr("id", tableId + "_tableHeadClone"); 76 divTableHead.append(tableHeadClone); 77 } 78 //列冻结生成的【冻结列DIV】【第四个DIV】 79 if (divTableColumn != null) { 80 var tableColumnClone = table.clone(true);//克隆3 81 tableColumnClone.attr("id", tableId + "_tableColumnClone"); 82 divTableColumn.append(tableColumnClone); 83 } 84 85 $("#" + tableId + "_tableLayout table").css("margin", "0"); 86 87 /** 88 * 根据冻结行数，设置行冻结的div的高度【如果行列同时冻结，则行列div也设置对应高度】 89 */ 90 if (freezeRowNum > 0) { 91 var HeadHeight = 0; 92 var ignoreRowNum = 0; 93 $("#" + tableId + "_tableHead tr:lt(" + freezeRowNum + ")").each(function () { 94 if (ignoreRowNum > 0) 95 ignoreRowNum--; 96 else { 97 var td = $(this).find('td:first, th:first'); 98 HeadHeight += td.outerHeight(true); 99 100 ignoreRowNum = td.attr('rowSpan'); 101 if (typeof(ignoreRowNum) == 'undefined') 102 ignoreRowNum = 0; 103 else 104 ignoreRowNum = parseInt(ignoreRowNum) - 1; 105 } 106 }); 107 HeadHeight += 2; 108 109 divTableHead.css("height", HeadHeight); 110 divTableFix != null && divTableFix.css("height", HeadHeight); 111 } 112 113 /** 114 * 根据冻结列数，对冻结列DIV设置宽度【如果行列同时冻结，则行列div也设置对应宽度】 115 */ 116 if (freezeColumnNum > 0) { 117 var ColumnsWidth = 0; 118 var ColumnsNumber = 0; 119 $("#" + tableId + "_tableColumn tr:eq(" + freezeRowNum + ")").find("td:lt(" + freezeColumnNum + "), th:lt(" + freezeColumnNum + ")").each(function () { 120 if (ColumnsNumber >= freezeColumnNum) 121 return; 122 123 ColumnsWidth += $(this).outerWidth(true); 124 125 ColumnsNumber += $(this).attr('colSpan') ? parseInt($(this).attr('colSpan')) : 1; 126 }); 127 ColumnsWidth += 2; 128 129 divTableColumn.css("width", ColumnsWidth); 130 divTableFix != null && divTableFix.css("width", ColumnsWidth); 131 } 132 133 //滚动 134 divTableData.scroll(function () { 135 divTableHead != null && divTableHead.scrollLeft(divTableData.scrollLeft()); 136 137 divTableColumn != null && divTableColumn.scrollTop(divTableData.scrollTop()); 138 }); 139 140 divTableFix != null && divTableFix.css({ "overflow": "hidden", "position": "absolute", "z-index": "50" }); 141 divTableHead != null && divTableHead.css({ "overflow": "hidden", "width": width - 17, "position": "absolute", "z-index": "45" }); 142 divTableColumn != null && divTableColumn.css({ "overflow": "hidden", "height": height - 17, "position": "absolute", "z-index": "40" }); 143 divTableData.css({ "overflow": "scroll", "width": width, "height": height, "position": "absolute" }); 144 145 divTableFix != null && divTableFix.offset(divTableLayout.offset()); 146 divTableHead != null && divTableHead.offset(divTableLayout.offset()); 147 divTableColumn != null && divTableColumn.offset(divTableLayout.offset()); 148 divTableData.offset(divTableLayout.offset()); 149 } 150 151 /* 152 * 调整锁定表的宽度和高度，这个函数在resize事件中调用 153 * 154 * 参数定义 155 * table - 要锁定的表格元素或者表格ID 156 * width - 表格的滚动区域宽度 157 * height - 表格的滚动区域高度 158 */ 159 function adjustTableSize(table, width, height) { 160 var tableId; 161 if (typeof(table) == 'string') 162 tableId = table; 163 else 164 tableId = table.attr('id'); 165 166 $("#" + tableId + "_tableLayout").width(width).height(height); 167 $("#" + tableId + "_tableHead").width(width - 17); 168 $("#" + tableId + "_tableColumn").height(height - 17); 169 $("#" + tableId + "_tableData").width(width).height(height); 170 } 171 172 //返回页面的高度 173 function pageHeight() { 174 if ( /msie/.test(navigator.userAgent.toLowerCase())) { 175 return document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight; 176 } else { 177 return self.innerHeight; 178 } 179 }; 180 181 //返回当前页面宽度 182 function pageWidth() { 183 if ( /msie/.test(navigator.userAgent.toLowerCase())) { 184 return document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth; 185 } else { 186 return self.innerWidth; 187 } 188 };
2》》》在需要实现冻结的界面的table中添加需要冻结的行和列数即可
gene.jsp在本页面的table标签中定义 freezeColumnNum="3" freezeRowNum="1" 冻结前三列，第一行
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 3 4 5 <% 6 String path = request.getContextPath(); 7 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 8 %> 9 <!DOCTYPE HTML> 10 <html> 11 <head> 12 <meta charset="utf-8"> 13 <meta name="renderer" content="webkit|ie-comp|ie-stand"> 14 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 15 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 16 <meta http-equiv="Cache-Control" content="no-siteapp" /> 17 18 <link href="../css/H-ui.min.css" rel="stylesheet" type="text/css" /> 19 <link href="../css/H-ui.admin.css" rel="stylesheet" type="text/css" /> 20 <link href="../css/style.css" rel="stylesheet" type="text/css" /> 21 <link href="../lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" /> 22 <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 23 <title>基因列表</title> 24 <style type="text/css" > 25 .pageInfo{ 26 display: inline; 27 } 28 .table{ 29 width: 5000px; 30 } 31 32 .table tbody tr { 33 background: #C6E2FF; 34 } 35 </style> 36 </head> 37 <body> 38 <nav class="breadcrumb"><i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span> 39 基因信息管理 <span class="c-gray en">></span> 40 <a href="queryAllProduct.htmls">产品列表 </a><span class="c-gray en">></span> 41 <a href="disease.htmls">疾病列表</a> <span class="c-gray en">></span> 42 <a href="gene.htmls">基因信息列表</a> <a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont"></i></a></nav> 43 <div class="pd-20"> 44 <div class="text-c"> 45 <select class="select" id="" name="" style="width:250px"> 46 <option value="0">疾病名称</option> 47 <option value="AccountInfo">基因型</option> 48 <option value="AdminInfo">关键字</option> 49 </select> 50 <button name="" id="" class="btn btn-success" type="submit"><i class="Hui-iconfont"></i> 查询</button> 51 </div> 52 </div> 53 54 <div class="cl pd-5 bg-1 bk-gray mt-20"> 55 <span class="l"><a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont"></i> 批量删除</a> 56 <a class="btn btn-primary radius" href="javascript:;"><i class="Hui-iconfont"></i> 添加基因型</a></span> 57 </div> 58 59 <!-- 分页 + table 从这里开始 由于样式采用bootstrap，所以class样式尽量使用一致的 --> 60 <div class="container"> 61 <!-- 分页的第一部分 开始 --> 62 <div class="row" style="margin: 20px 0px 5px 10px;"> 63 <label class="pageInfo">每页显示 </label> 64 <select class="form-control pageInfo" style="width: 20%"> 65 <option>5</option> 66 <option selected="selected">10</option> 67 <option>20</option> 68 <option>50</option> 69 <option>100</option> 70 </select> 71 <label class="pageInfo">条</label> 72 </div> 73 <input type="hidden" value=${disease} class="beDiseaseId"/> 74 <div class="row gen"><!-- 采用样式row 分成一层 一层 --> 75 <table id="genetable" class="table table-border table-bordered table-bg table-hover table-sort table-striped" freezeColumnNum="3" freezeRowNum="1"> 76 <thead> 77 <tr class="text-c"> 78 <th><input type="checkbox" id="ch2">全选</th> 79 <th>疾病名称</th> 80 <th>基因名称<br/>【gene】</th> 81 <th>位置信息<br/>【location】</th> 82 <th>SNP<br/>【rs#】</th> 83 <th>突变区域<br/>【position】</th> 84 <th>突变信息<br/>【(ref /mut)allele】</th> 85 <th>影响氨基酸改变<br/>【influence】</th> 86 <th>风险等位基因信息<br/>【Risk allele】</th> 87 <th>最小等位基因频率<br/>【allele frequency】</th> 88 <th>基因型分布<br/>【genotype model】</th> 89 <th>基因型分布对应频率<br/>【genotype frequency】</th> 90 <th>O/R值<br/>【OR/HR value】</th> 91 <th>最小等位基因<br/>【minor allele】</th> 92 <th>case人数<br/>【case】</th> 93 <th>control人数<br/>【control】</th> 94 <th>基因序列<br/>【flanking sequence5'-3'】</th> 95 <th>国外分布<br/>【Foreign published】</th> 96 <th>单体型图<br/>【Hapmap】</th> 97 <th>中华8号<br/>【中华8号】</th> 98 <th>替代位点<br/>【替代位点】</th> 99 <th>替代微点风险等位基因<br/>【替代位点风险等位基因】</th> 100 <th>基因备注</th> 101 </tr> 102 </thead> 103 <tbody> 104 </tbody> 105 </table> 106 </div> 107 <!-- 分页 第二部分 开始 --> 108 <div class="row"> 109 <!-- 第二部分左边部分开始 --> 110 <div class="pageInfo pull-left" style="position: relative;top: 32px; font-family: Times New Roman;">当前显示第<label class="startInfo"></label>条到第<label class="endInfo"></label> 条，总共<label class="totalInfo"></label>条</div> 111 <!-- 第二部分右边部分 开始 --> 112 <div class="pageInfo pull-right"> 113 <nav > 114 <ul class="pagination"> 115 <li> 116 <a href="#" aria-label="Previous" style="display: none"> 117 <span aria-hidden="true">«</span> 118 </a> 119 </li> 120 <li class="active"><a href="#">1</a></li> 121 <li> 122 <a href="#" aria-label="Next"> 123 <span aria-hidden="true">»</span> 124 </a> 125 </li> 126 </ul> 127 </nav> 128 </div> 129 </div> 130 <!-- 分页第二部分 结束 --> 131 </div> 132 133 <script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script> 134 <script type="text/javascript" src="../lib/layer/1.9.3/layer.js"></script> 135 <script type="text/javascript" src="../lib/My97DatePicker/WdatePicker.js"></script> 136 <script type="text/javascript" src="../js/bootstrap.min.js"></script> 137 <script type="text/javascript" src="../js/H-ui.js"></script> 138 <script type="text/javascript" src="../js/H-ui.admin.js"></script> 139 <script type="text/javascript" src="../js/pageSet.js"></script> 140 <script type="text/javascript" src="../js/freezeTable.js"></script> 141 <script type="text/javascript" src="../js/geneinfo/gene/gene.js"></script> 142 </body> 143 </html>
3》》》在本页面的JS中 实现冻结代码即可
gene.js 在本JS中 定义冻结方法，在数据填充完成之后，再判断是否需要执行冻结操作，调用冻结方法即可。
【为何在数据填充完成之后才判断是否使用？】
【因为，若数据未填充即执行冻结方法，那么克隆的几个DIV中是没有table的数据的，因此冻结插件中是获取不到需要冻结的行数或者列数，那冻结就不能成功】
1 var indexGeneAdd;//定义一个index作为产品添加弹出窗的layer打开返回值 ，用于关闭的时候使用 2 var disease; 3 var flag = true; //设置boolean值用于判断是否已经实现冻结，如果已经实现冻结则仅需要上面的加载数据即可/如果未实现冻结，即flag为true，则上面数据加载完成就实现冻结操作 4 $(document).ready( function () { 5 6 disease = $(".beDiseaseId").val(); 7 disease = JSON.parse(disease); 8 /** 9 * >>>>>>>>>>>>>>>>>>>>>>以下是冻结列的插件使用>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 10 */ 11 /** 12 * 冻结列的绑定方法 13 */ 14 function freeTable(){ 15 var table = $("table"); //获取当前table 16 var tableId = table.attr('id'); //table的ID之后作为参数传递 17 var freezeRowNum = table.attr('freezeRowNum'); //获取页面table定义的冻结行和列 18 var freezeColumnNum = table.attr('freezeColumnNum'); 19 20 if (typeof(freezeRowNum) != 'undefined' || typeof(freezeColumnNum) != 'undefined') { 21 freezeTable(table, freezeRowNum || 0, freezeColumnNum || 0, pageWidth()-500, pageHeight()-350); 22 23 var flag = false; 24 $(window).resize(function() { 25 if (flag) 26 return ; 27 28 setTimeout(function() { 29 adjustTableSize(tableId, pageWidth()-500, pageHeight()-350); 30 flag = false; 31 }, 100); 32 33 flag = true; 34 }); 35 } 36 } 37 /** 38 * 由于 冻结列是几个DIV，因此鼠标置于一行上看到的是几块， 解决光标置上一体的变化问题 39 */ 40 $(document).on("mouseover",".table-bordered tbody tr td",function(){ 41 $(".table-bordered tbody").find("tr:eq("+$(this).parent().index()+")").find("td").css("background-color","#E6E6FA") 42 }); 43 /** 44 * 光标移出效果变化 45 */ 46 $(document).on("mouseout",".table-bordered tbody tr td",function(){ 47 $(".table-bordered tbody").find("tr:nth-child(odd)").find("td").css("background-color","#C6E2FF"); 48 $(".table-bordered tbody").find("tr:nth-child(even)").find("td").css("background-color","#F9F9F9"); 49 }); 50 51 /** 52 * 全选按钮的点击事件 53 */ 54 $("#ch2").click(function(){ 55 if($(this).prop("checked")){ 56 $(this).parents("div table").parent("div").siblings().find('tbody').find("input[type='checkbox']").prop("checked",true);//让其他的几个table中checkbox也全部选中 57 }else{ 58 $(this).parents("div table").parent("div").siblings().find('tbody').find("input[type='checkbox']").prop("checked",false);//让其他的几个table中checkbox也全部选中 59 } 60 61 }); 62 63 /** 64 * >>>>>>>>>>>>>>>>>>>>>>>>>>>>>以下是分页插件的初始化对象，绑定数据的方法>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 65 */ 66 /** 67 * 封装数据 的方法 在本页面的js中， 68 */ 69 bindData = function bindData(){ 70 var result = page.result; 71 $(".table-bordered tbody").empty(); 72 if(result != "" && result != null && result != undefined) { 73 var temp = ""; 74 $.each(result, function(index, item) { 75 //JSON.stringify(item) 对象转化字符串 76 temp += "<tr class='text-c'><td><input type='checkbox' value='"+item.geneId 77 +"'><input type='hidden' value='"+JSON.stringify(item) 78 +"'/></td><td>"+disease.diseaseName 79 +"</td><td>"+item.geneName 80 +"</td><td>"+item.location 81 +"</td><td>"+item.snp 82 +"</td><td>"+item.position 83 +"</td><td>"+item.allele 84 +"</td><td>"+item.influence 85 +"</td><td>"+item.riskAllele 86 +"</td><td>"+item.alleleFrequency 87 +"</td><td>"+item.genotypeModel 88 +"</td><td>"+item.genotypeFrequency 89 +"</td><td>"+item.orhrvalue 90 +"</td><td>"+item.minorAllele 91 +"</td><td>"+item.caseNum 92 +"</td><td>"+item.controlNum 93 +"</td><td>"+item.flankingSequence 94 +"</td><td>"+item.foreignPublished 95 +"</td><td>"+item.hapMap 96 +"</td><td>"+item.theE 97 +"</td><td>"+item.alterSite 98 +"</td><td>"+item.alterSiteRisk 99 +"</td><td>"+item.geneCre 100 +"</td>"; 101 }); 102 $(".table-bordered tbody").append(temp); 103 } 104 page.setValue(); 105 //设置boolean值用于判断是否已经实现冻结，如果已经实现冻结则仅需要上面的加载数据即可/如果未实现冻结，即flag为true，则上面数据加载完成就实现冻结操作 106 if(flag){ 107 freeTable(); 108 flag = false; 109 } 110 } 111 112 /** 113 * 实例化一个分页组件的 对象 114 */ 115 page = new page("queryAllGene.htmls?diseaseId="+disease.diseaseId, bindData); 116 page.pageSet(); 117 118 119 120 /** 121 * >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>增加 + 删除>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 122 */ 123 /** 124 * 添加基因 页面 125 */ 126 127 $(".btn-primary").click( function(){ 128 indexGeneAdd = layer.open({ 129 type: 2, 130 title: "添加基因信息", 131 content: 'geneadd.htmls', 132 area: ['1200px', '900px'] 133 }); 134 }); 135 136 137 138 139 140 } );
如此既可以实现冻结行列的操作！！！！
扫一扫
2650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
