【jQuery 冻结任意行列】冻结任意行和列的jQuery插件

实现原理：

创建多个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 };

View Code

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">&gt;</span>
 39 基因信息管理 <span class="c-gray en">&gt;</span>
 40 <a href="queryAllProduct.htmls">产品列表 </a><span class="c-gray en">&gt;</span>
 41 <a href="disease.htmls">疾病列表</a>  <span class="c-gray en">&gt;</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">&laquo;</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">&raquo;</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>

View Code

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 } );

View Code

如此既可以实现冻结行列的操作！！！！