實現原理：
創建多個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 } );
如此既可以實現凍結行列的操作！！！！