重構一段基於原生JavaScript的表格繪製程式碼
阿新 • • 發佈：2018-11-10
為了在CardSimulate專案中方便的顯示技能和效果列表，決定重構以前編寫的一段JavaScript程式碼——att表格繪製庫，這段程式碼的作用是將特定的JavaScript資料物件轉化為表格，支援精細的樣式設定和一些複雜報表功能並且提供了自由的擴充套件性。可以用較新的Chrome瀏覽器訪問https://ljzc002.github.io/Att/HTML/TEST/AttSample.html檢視新版程式碼的例子，舊版程式碼的介紹見：https://www.cnblogs.com/ljzc002/p/5511510.html。
1、從表格類初始化表格物件
舊版的程式碼直接將表格物件作為一個全域性變數，新版程式碼則定義了一個表格類，而每一個表格物件則是表格類的例項，這樣就可以方便的在一個頁面裡新增多個表格物件，並有條理的管理多個表格的工作流程和屬性。表格物件的初始化程式碼如下：
1 /** 2 * Created by Administrator on 2015/5/11. 3 */ 4 //動態畫表類，嘗試使用自包含結構 5 //2016/8/31在表格中加入更多的格式選擇 6 //2018/10/31重構att6框架為att7版本 7 Att7=function() 8 { 9 10 } 11 Att7.prototype.init=function(param)//只初始化物件的屬性，不實際繪製 12 { 13 try 14 { 15 this.base=param.base;//表格的容器物件 16 this.id=param.id;//表格的id 17 //this.left=param.left?param.left:0;//在容器物件內的左側距離->認為tab_data和div_table完全重合 18 //this.top=param.top?param.top:0;//上部距離 19 this.rowsp=param.rowsp?param.rowsp:50;//預設每頁顯示50條資料，輸入負值表示無限制 20 //this.page_current=param.page_current?param.page_current:0;//預設顯示資料集的第一頁，初始索引為021 this.isStripe=param.isStripe?param.isStripe:1;//這種三目運算不適用於布林值！！！！預設奇偶行使用不同顏色 22 this.isThlocked=param.isThlocked?param.isThlocked:0;//預設不鎖定表頭 23 this.isCollocked=param.isCollocked?param.isCollocked:0;//預設不鎖定表列 24 this.showIndex=param.showIndex?param.showIndex:1;//預設在左側顯示行號 25 this.baseColor=param.baseColor?param.baseColor:"#ffffff";//預設背景色為白色，間隔色為背景色亮度降低十六分之一 26 this.stripeColor=param.stripeColor?param.stripeColor:"#eeeeee";//有時要求奇數行和偶數行使用不同的顏色 27 this.pickColor=param.pickColor?param.pickColor:"#97ceef";//選擇了某一行時要突出顯示這一行 28 this.div_temp1=document.createElement("div");//這幾個div用來對背景顏色進行比較，因為不同的瀏覽器對背景顏色的儲存方式不同 29 this.div_temp1.style.backgroundColor=this.baseColor;//有的用小寫字母有的用大寫字母，有的用rgb+數字，所以這裡主動建立div 30 this.div_temp2=document.createElement("div");//在同樣的儲存方式下對顏色進行比較 31 this.div_temp2.style.backgroundColor=this.stripeColor; 32 this.div_temp3=document.createElement("div"); 33 this.div_temp3.style.backgroundColor=this.pickColor; 34 this.str_indexwid=param.str_indexwid?param.str_indexwid:"100px";//索引列的寬度 35 this.num_toolhei=param.num_toolhei?param.num_toolhei:80;//表格上部的工具區的高度 36 //固有屬性，點選某些單元格時可以開啟的小視窗 37 this.html_onclick="<div class=\"div_inmod_lim\" style=\"width: 100%;height: 100%;margin: 0px;border: 1px solid;padding: 0px;" + 38 "float: left;line-height: 20px\"> " + 39 "<div class=\"div_inmod_head\" style=\"width: 100%;height: 20px;background-color: #E0ECFF;margin:0;border: 0;padding:0;border-bottom: 1px solid\">" + 40 " <span style=\"float: left;margin-left: 2px\">詳情</span>" + 41 "<BUTTON style=\'float:right;aposition:static; width: 14px;height: 14px; margin: 0;margin-top: 2px;margin-right:2px;padding: 0;" + 42 "background: url(../../ASSETS/IMAGE/close.png) no-repeat;border: 0px;vertical-align:top\' onclick=\"delete_div(\'div_bz\');\" type=submit></BUTTON> " + 43 "</div> " + 44 "<textarea class=\"div_inmod_lim_content\" style=\"width: 100%;height: 98px;overflow-x: hidden;margin:0;border: 0;padding:0\" contenteditable=\"false\"></textarea> </div>"; 45 this.html_onmouseover=//滑鼠移入時彈出的小文字提示框 46 "<div class=\"div_inmod_lim\" " + 47 "style=\"width: 100%;height: 100%;margin: 0px;border: 1px solid;padding: 0px;float: left;line-height: 20px\"> " + 48 "<textarea class=\"div_inmod_lim_content\" style=\"width: 100%;height: 100%;overflow-x: hidden;margin:0;border: 0;padding:0\" contenteditable=\"false\">" + 49 "</textarea> " + 50 "</div>"; 51 } 52 catch(e) 53 { 54 console.log("表格初始化異常！"+e); 55 return false; 56 } 57 return "ok"; 58 }
這裡設定了表格物件的各項屬性，第28到33行用不顯示的div解決了dom標籤顏色比較問題，第37到50行定義了兩個視窗小控制元件以備後續呼叫。init方法的呼叫方式如下：
1 var table1=new Att7(); 2 var objp={ 3 base:"div_tab", 4 id:"table1", 5 //left:50, 6 //top:50, 7 rowsp:999, 8 isThlocked:1, 9 isCollocked:2,//不包括索引列？-》包括 10 baseColor:"#00ff00", 11 stripeColor:"#00aa00", 12 pickColor:"#97ceef" 13 } 14 if(table1.init(objp)=="ok") 15 {//下面是資料顯示
2、表格容器的建立：
表格顯示時dom結構如下：
其中all_base是所有表格相關元素的總容器，div_tool是表格上面的工具區，裡面可以放置一些選擇篩選條件的控制元件，div_tab是表格主體所在的區域，table1是根據資料生成的表格dom，三個div_mask是鎖定表頭或者鎖定表列時使用的遮罩層dom。
使用的樣式表文件如下：
1 /*專用於表格框架的樣式*/ 2 body{ margin: 0; padding: 0; border: 0; text-align: center; overflow: hidden;width: 100%; 3 height: 100%;position: fixed; font-family: verdana,arial,sans-serif; touch-action: none; 4 -ms-touch-action: none;font-size: 12px;min-width: 600px;} 5 #all_base{min-height: 576px;min-width: 1024px;height: 100%;width:100%;position: relative;overflow-x:auto;overflow-y: hidden;} 6 /*表格的屬性*/ 7 td input{ height: 100%; width: 100%; border:0; text-align: center; background-color: inherit;} 8 .div_tab{float: left;position: relative;width:4000px;overflow-x: hidden;overflow-y: scroll} 9 .div_tab td{ text-align: center; /*border: solid 1px #008000;*/ border-right:solid 1px #008000; border-bottom: solid 1px #008000; 10 line-height: 16px; font-size: 13px; height: 24px; padding: 1px; background-color: inherit; word-break: keep-all; 11 /*display: inline-block*/} 12 .div_tab th{ text-align: center; /*border: solid 1px #008000;*/ line-height: 16px; font-size: 13px; height: 36px; 13 padding: 1px; text-align: center; border-right: solid 1px #008000; border-bottom: solid 1px #008000; word-break: keep-all; 14 white-space:nowrap; overflow: hidden; text-overflow: ellipsis;/*display: inline-block*/} 15 .div_tab table{ float: left; width: auto; border-right-width:0px; border: solid 1px #008000; table-layout: fixed;} 16 .div_tab tr{ width: auto; vertical-align: middle; /*border: solid 1px #008000;*/ padding: 1px;} 17 td a{ cursor: pointer;} 18 td button{ cursor: pointer;} 19 .div_mask2{ display:block; left: 0px; top: 0px; /*filter: alpha(opacity=50); opacity: 0.50;*/ overflow: hidden;/*鎖定的表頭表列*/ 20 position: absolute; float: left; overflow-x: hidden} 21 table{ border-spacing:0;} 22 .div_mask2 td{ text-align: center; /*border: solid 1px #008000;*/ border-right:solid 1px #008000; border-bottom: solid 1px #008000; 23 line-height: 16px; font-size: 13px; height: 24px; padding: 1px; background-color: inherit; word-break: keep-all;} 24 .div_mask2 th{ text-align: center; /*border: solid 1px #008000;*/ line-height: 16px; font-size: 13px; height: 36px; 25 padding: 1px; text-align: center; border-right: solid 1px #008000; border-bottom: solid 1px #008000; word-break: keep-all; 26 white-space:nowrap; overflow: hidden; text-overflow: ellipsis;} 27 .div_mask2 table{ float: left; width: auto; border-right-width:0px; border: solid 1px #008000; table-layout: fixed; 28 position: absolute;} 29 .div_mask2 tr{ width: auto; vertical-align: middle; /*border: solid 1px #008000;*/ padding: 1px;} 30 .combo-panel li{ float:none;} 31 .btn_limlen{ /*float: left;*/ height: 20px; width: 20px; border: 1px solid; /*margin-top: 6px;*/ /*margin-left: 4px;*/ 32 background: url(../ASSETS/IMAGE/play.png) no-repeat; position: absolute; -moz-border-radius: 3px; /* Gecko browsers圓角 */ 33 -webkit-border-radius: 3px; /* Webkit browsers */ border-radius:3px; /* W3C syntax */ position: absolute; 34 top: 6px; right: 4px;}
遺憾的是，因為上述CSS的除錯過程太長，以至於已經忘記了這樣設定的原因，如果您使用時出現莫名其妙的元素錯位，請自己除錯。
3、啟動表格繪製
通過表格物件的draw方法啟動表格繪製
呼叫draw方法的方式如下：
1 if(table1.init(objp)=="ok") 2 { 3 var obj_datas=[ 4 "測試表格", 5 ["測試表頭","測試表頭","測試表頭","測試表頭","測試表頭","測試表頭","測試表頭","測試表頭"], 6 ["str" 7 ,"limit" 8 ,["switch",["value1","text1"],["value2","text2"]] 9 ,["input",["class1"],["height","10px"]] 10 ,["select","class2",[["value1","text1"],["value2","text2"],["value3","text3"]],"onChange()"] 11 ,["check","class3"] 12 ,["button","class4","按鈕","80px",["height","10px"]] 13 ,["a","class5",["height","10px"]] 14 ], 15 [100,200,300,400,500,600,700,800], 16 ["value1","value2value2value2value2value2value2value2value2value2value2","value1","value2","value1","value2","value1","value2"], 17 ["value1","value2","value1","value2","value1","value2","value1","value2"] 18 ,["value1","value2","value1","value2","value1","value2","value1","value2"] 19 ]; 20 table1.draw(obj_datas,0);//顯示資料obj_datas的第0行 21 requestAnimFrame(function(){table1.AdjustWidth();}); 22 }
其中obj_datas是一個自定義的資料物件，這個物件可能從後端程式傳送過來也可能是在前臺組裝生成。requestAnimFrame是擷取自谷歌WebGL工具庫的一個方法，用來“延時一會”，等待瀏覽器完成表格容器渲染後，再調整表格尺寸從而使表格佈局緊密。
延時程式碼如下：
1 // Copyright 2010, Google Inc. 2 window.requestAnimFrame = (function() { 3 return window.requestAnimationFrame || 4 window.webkitRequestAnimationFrame || 5 window.mozRequestAnimationFrame || 6 window.oRequestAnimationFrame || 7 window.msRequestAnimationFrame || 8 function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { 9 window.setTimeout(callback, 1000/60); 10 }; 11 })();
4、表格繪製程式碼的介紹：
a、首先做一些和表格翻頁有關的準備工作：
1 Att7.prototype.draw=function(data,page_current)//實際繪製dom元素 2 { 3 this.totalpages=0;//記錄下一共有多少頁 4 if(this.rowsp>0) 5 { 6 this.totalpages=Math.ceil((data.length-4)/this.rowsp); 7 } 8 if(this.totalpages==0) 9 { 10 this.totalpages=1; 11 } 12 //計算當前頁數 13 if(page_current<0) 14 { 15 alert("到達資料首頁！"); 16 this.page_current=0; 17 } 18 else if(page_current>=this.totalpages) 19 { 20 alert("到達資料末尾"); 21 this.page_current=this.totalpages-1; 22 } 23 else 24 { 25 this.page_current=page_current; 26 }
因為att將所有dom標籤的生成工作放在瀏覽器端，所以可以一次性將所有資料從後臺讀取到前端，由前端JavaScript程式進行分頁操作。（而傳統表格繪製工具多把dom標籤生成放在後臺程式中，為了降低後臺壓力，分頁操作多在資料庫層面進行）
翻頁方法程式碼如下：
1 //翻頁處理 2 Att7.prototype.ChangePage=function(flag) 3 { 4 document.body.style.cursor='wait'; 5 switch(flag)//不同的翻頁動作對應不同的頁號處理 6 { 7 case "0": 8 { 9 this.page_current=0; 10 break; 11 } 12 case "+": 13 { 14 this.page_current++; 15 break; 16 } 17 case "-": 18 { 19 this.page_current--; 20 break; 21 } 22 case "9999": 23 { 24 this.page_current=9999; 25 break; 26 } 27 } 28 this.draw(this.data,this.page_current); 29 document.getElementById('t_page_span').innerHTML=this.totalpages; 30 try {//萬一沒有定義 31 AdjustColor(); 32 } 33 catch(e) 34 { 35 36 } 37 document.getElementById('c_page_span').innerHTML=this.page_current+1; 38 document.body.style.cursor='default'; 39 var _this=this; 40 try 41 { 42 requestAnimFrame(function () { 43 _this.AdjustWidth() 44 }); 45 } 46 catch(e) 47 { 48 49 } 50 }
根據ChangePage方法的不同引數，可以進行四種不同的翻頁操作，您可以再需要的地方建立四個按鈕來對應這些操作，而翻頁操作實際上只是改變了引數的draw方法。t_page_span和c_page_span是兩個span標籤，用來顯示總頁數和當前頁數。AdjustColor是一個可選的方法，在繪製表格後遍歷單元格，根據需求改變符合某種條件的單元格的顏色。（這裡並未使用）
b、在開始繪製之前清理以前可能繪製過的id相同的表格：
1 //接著上面的翻頁準備 2 this.data=data;//表格的資料集 3 var tab_data;//table標籤 4 var tab_colmask;//列鎖定遮罩標籤 5 if (document.getElementById(this.id))//如果已有該表 6 {//清理已有的dom 7 tab_data= document.getElementById(this.id); 8 var parent = tab_data.parentNode; 9 parent.removeChild(tab_data); 10 if(document.getElementById("div_thmask"))//刪除鎖定表頭的遮罩層 11 { 12 var div =document.getElementById("div_thmask");//看來這樣的設定還不能支援一個頁面中同時存在多個鎖定表頭表格 13 div.parentNode.removeChild(div); 14 } 15 if(document.getElementById("tab_mask2"))//刪除鎖定表列的遮罩層 16 { 17 var tab =document.getElementById("tab_mask2"); 18 tab.parentNode.removeChild(tab); 19 } 20 if(document.getElementById("div_thmask3"))// 21 { 22 var tab =document.getElementById("div_thmask3"); 23 tab.parentNode.removeChild(tab); 24 } 25 } 26 tab_data = document.createElement("table");//重新建立table標籤 27 tab_data.id = this.id; 28 tab_data.cellPadding = "0"; 29 tab_data.cellSpacing = "0"; 30 tab_data.style.position = "absolute"; 31 //tab_data.style.top = this.top + "px"; 32 //tab_data.style.left = this.left + "px"; 33 var div_table;//包含表格的容器元素 34 35 var obj=this.base;//這個屬性可能是id字串也可能是物件本身 36 if((typeof obj)=="string"||(typeof obj)=="String") 37 { 38 div_table = document.getElementById(obj); 39 } 40 else 41 { 42 div_table=obj; 43 } 44 div_table.innerHTML=""; 45 div_table.appendChild(tab_data);//將table標籤放入容器裡 46 this.div_table=div_table; 47 tab_data = document.getElementById(this.id);
c、表格表頭的繪製與遮罩原理
在一個簡單的表格裡繪製表頭並不複雜：
1 var tr1 = document.createElement("tr");//填寫表頭（接著清理程式碼） 2 if(this.showIndex==1)//如果顯示索引列 3 { 4 this.InsertaTHStr(tr1, "第"+(this.page_current+1) + "頁",this.str_indexwid);//IE8中缺少引數會報錯 5 } 6 for (var k = 0; k < data[1].length; k++) 7 { 8 this.InsertaTHStr(tr1, data[1][k],(data[3][k]+"px")); 9 } 10 tab_data.appendChild(tr1);//將tr放入table 11 tr1.style.backgroundColor=this.baseColor;
如果選擇顯示索引列，則在表頭的最左側多插入一個th，InsertaTHStr方法用來向指定tr中插入th，引數分別是tr物件、列名、列寬，這裡的data也就是之前構造的資料集。
InsertaTHStr程式碼如下：
1 //一些工具方法 2 /** 3 * 向一個錶行中新增字元型表頭元素 4 * @param tr 錶行ID 5 * @param str 新增字元 6 * @param wid 列寬（字元型px） 7 * @constructor 8 */ 9 Att7.prototype.InsertaTHStr=function(tr,str,wid) 10 { 11 var th=document.createElement("th"); 12 th.style.width=wid?wid:"200px"; 13 if(str==null) 14 { 15 str=""; 16 } 17 th.appendChild(document.createTextNode(str)); 18 tr.appendChild(th); 19 }
然而當需要鎖定表頭或者鎖定表列時，事情變得複雜，接著繪製表頭的程式碼：
1 this.arr_lock=[];//all_base左右滑動時需要調整位置的元素 2 this.arr_locky=[]; 3 if(this.isThlocked==1)//繪製鎖定表頭的遮罩層，它的內容和原表格的表頭是一樣的 4 { 5 var div_thmask=document.createElement("div"); 6 div_thmask.className="div_mask2"; 7 div_thmask.id="div_thmask"; 8 div_thmask.style.zIndex="200"; 9 var div_parent=div_table.parentNode; 10 this.div_parent=div_parent; 11 div_thmask.style.top=(compPos2(div_table).top-parseInt(div_table.style.height.split("p")[0]))+this.top+"px";//定位新增的遮罩層 12 div_thmask.style.left=compPos2(div_table).left+this.left+"px"; 13 div_thmask.style.width="6000px";//遮罩的最大寬度 14 div_thmask.style.height="42px"; 15 div_thmask.style.top=this.num_toolhei+"px"; 16 //div_thmask.getElementsByTagName("table")[0].style.backgroundColor=this.baseColor; 17 18 var tab_thmask= document.createElement("table"); 19 var tr_thmask=document.createElement("tr"); 20 if(this.showIndex==1)//如果不禁止索引列 21 { 22 this.InsertaTHStr(tr_thmask, "第" + (this.page_current + 1) + "頁", this.str_indexwid);//IE8中缺少引數會報錯 23 } 24 for (var k = 0; k < data[1].length; k++) 25 { 26 this.InsertaTHStr(tr_thmask, data[1][k],(data[3][k]+"px")); 27 } 28 tab_thmask.appendChild(tr_thmask); 29 tab_thmask.style.backgroundColor=this.baseColor; 30 div_thmask.appendChild(tab_thmask); 31 div_parent.appendChild(div_thmask); 32 } 33 if(this.isCollocked>0)//繪製鎖定表列的遮罩層，估計不需要外包裝的div，可以和data_table共享div_table（考慮到層數決定這樣做） 34 { 35 this.arr_lock.push(["tab_mask2",1,0]);//第一個引數是要鎖定的標籤的id，第二個是是否鎖定，第三個是標籤的初始水平偏移量 36 this.arr_lock.push(["div_bz",0,0]); 37 tab_colmask= document.createElement("table"); 38 tab_colmask.cellPadding = "0"; 39 tab_colmask.cellSpacing = "0"; 40 tab_colmask.style.position = "absolute"; 41 tab_colmask.className="div_mask2"; 42 tab_colmask.id="tab_mask2"; 43 tab_colmask.style.zIndex="150"; 44 tab_colmask.style.top="0px"; 45 tab_colmask.style.backgroundColor=this.baseColor 46 var tr_mask= document.createElement("tr");//創造一個佔位用的表頭行 47 if(this.showIndex==1)//如果不禁止索引列 48 { 49 this.InsertaTHStr(tr_mask, "第" + (this.page_current + 1) + "頁", this.str_indexwid); 50 } 51 for (var k = 0; k < this.isCollocked-1; k++) 52 { 53 this.InsertaTHStr(tr_mask, data[1][k],(data[3][k]+"px")); 54 } 55 tab_colmask.appendChild(tr_mask); 56 } 57 //如果同時鎖定了表頭和左側的表列 58 if((this.isThlocked==1)&&(this.isCollocked>0)) 59 { 60 this.arr_lock.push(["div_thmask3",1,0]); 61 var div_thmask=document.createElement("div"); 62 div_thmask.className="div_mask2"; 63 div_thmask.id="div_thmask3"; 64 div_thmask.style.zIndex="250"; 65 var div_parent=div_table.parentNode; 66 div_thmask.style.top=(compPos2(div_table).top-parseInt(div_table.style.height.split("p")))+"px";//定位新增的遮罩層 67 div_thmask.style.left=compPos2(div_table).left+"px"; 68 div_thmask.style.width="4000px"; 69 div_thmask.style.height="42px"; 70 div_thmask.style.top=this.num_toolhei+"px"; 71 72 var tab_thmask= document.createElement("table"); 73 tab_thmask.style.backgroundColor=this.baseColor; 74 var tr_thmask=document.createElement("tr"); 75 if(this.showIndex==1)//如果不禁止索引列 76 { 77 this.InsertaTHStr(tr_thmask, "第" + (this.page_current + 1) + "頁", this.str_indexwid);//IE8中缺少引數會報錯 78 } 79 for (var k = 0; k < this.isCollocked-1; k++) 80 { 81 this.InsertaTHStr(tr_thmask, data[1][k],(data[3][k]+"px")); 82 } 83 tab_thmask.appendChild(tr_thmask); 84 div_thmask.appendChild(tab_thmask); 85 div_parent.appendChild(div_thmask); 86 }
實現表頭表列鎖定的思路是這樣的：首先all_base的大小固定為all_base的容器的大小（在這裡等於視窗大小），然後把div_table設定的足夠寬（預設4000px），而高度則設為all_base高度減div_tools高度的有限值，這樣當table的行數較多且div_table獲得焦點時即可用滑鼠滾輪控制div_table的內容的上下滾動，而因為div_table的寬度超過all_base，div_table的上下滑動條被隱藏起來。
在div_table的內容上下滾動時，因為div_thmask和div_thmask3在div_table外相對於all_base定位，所以不會受div_table滾動的影響，再將z-index設高一些，看起來就是表格內容滾動而表頭鎖定不變。
至於表列鎖定，首先禁用all_base的上下滑動，只保留左右滑動，因為div_table比all_base寬，所以all_base的左右滑動條一直存在，監聽all_base滑動條的滑動事件，在每次滑動時調整div_mask2的水平位置，即可達到看起來鎖定了表列的效果。
在同時鎖定了表頭和表列時，div_thmask3位於這幾個遮罩的最上層，表現二者共同起作用的效果。
all_base滑動的響應方法如下：
1 Att7.prototype.ScrollLock=function()//拖動滑動條時，彈出層隨拖動一同移動 2 { 3 var mask2left=0; 4 var mask2top=0; 5 var scrollleft=document.getElementById("all_base").scrollLeft;//scrollLeft指滑動條向右滑動的距離 6 var scrolltop=document.getElementById("all_base").scrollTop; 7 var arr_lock=this.arr_lock; 8 var arr_locky=this.arr_locky; 9 var leng=arr_lock.length; 10 for(var i=0;i<leng;i++) 11 { 12 if(arr_lock[i][1]==1) 13 { 14 //$("#"+arr_lock[i][0]).css("left",mask2left+scrollleft+arr_lock[i][2]+"px"); 15 document.getElementById(arr_lock[i][0]).style.left=mask2left+scrollleft+arr_lock[i][2]+"px"; 16 } 17 } 18 var leng2=arr_locky.length; 19 for(var i=0;i<leng2;i++) 20 { 21 if(arr_locky[i][1]==1) 22 { 23 //$("#"+arr_locky[i][0]).css("top",mask2top+scrolltop+arr_locky[i][2]+"px"); 24 document.getElementById(arr_locky[i][0]).style.top=mask2top+scrolltop+arr_locky[i][2]+"px"; 25 } 26 } 27 }
在實際使用中發現，雖然鎖定遮罩裡的內容和原表格裡的內容相同，但實際渲染時總會出現尺寸偏差，所以在完成渲染後執行AdjustWidth方法重新調整遮罩的寬度：
1 //不斷修正讓遮罩層的寬高和底層一致 2 Att7.prototype.AdjustWidth=function() 3 { 4 if(document.getElementById("div_thmask")) 5 { 6 var ths_mask = document.getElementById("div_thmask").getElementsByTagName("th"); 7 var ths = document.getElementById(this.id).getElementsByTagName("th"); 8 if (ths[0].offsetWidth) {//有寬度說明瀏覽器已經完成了渲染操作 9 this.div_table.style.height=this.div_parent.offsetHeight-this.num_toolhei-12+"px";//調整div_table高度 10 var leng = ths.length; 11 for (var i = 0; i < leng; i++) { 12 try { 13 ths_mask[i].style.width = (ths[i].offsetWidth - 3) + "px"; 14 } 15 catch (e) { 16 //i--; 17 continue; 18 } 19 } 20 if (document.getElementById("div_thmask3")) { 21 var div_thmask3 = document.getElementById("div_thmask3").getElementsByTagName("th"); 22 var leng2 = div_thmask3.length; 23 for (var i = 0; i < leng2; i++) { 24 div_thmask3[i].style.width = (ths[i].offsetWidth - 3) + "px"; 25 } 26 } 27 if (document.getElementById("tab_mask2")) 28 { 29 var trs_mask = document.getElementById("tab_mask2").getElementsByTagName("tr"); 30 var trs = document.getElementById(this.id).getElementsByTagName("tr"); 31 var leng3 = trs.length; 32 for (var i = 1; i < leng3; i++) 33 { 34 trs_mask[i].style.height =(trs[i].offsetHeight)+"px"; 35 } 36 } 37 } 38 else {//如果還沒有完成渲染，則再延時呼叫一次 39 var _this=this; 40 requestAnimFrame(function () { 41 _this.AdjustWidth()//需要注意的是延時操作或者事件觸發時，原來的this物件已經隨著時間的推移被釋放掉了，所以用_this保持這個物件 42 }); 43 } 44 } 45 }
如果您想為表格新增動態調整列寬功能，可以在列寬變化後呼叫這個方法；或者如果您想在瀏覽器尺寸變化後保持div_table和all_bas的緊密貼合也可以將這個方法設為resize事件的響應。
d、繪製最簡單的表格內容：
//接著上面的表頭繪製 if (this.rowsp > 0)//預設必須要分頁，資料集的第一行是表名、第二行是列名、第三行是列設定、第四行是列寬、第五行開始是資料 { var rows=this.rowsp;//每一頁多少行 var pages=this.page_current;//當前頁 var collock=this.isCollocked;//鎖定幾個表列 var count=0;//標記經過了幾個沒有資料來源的列，存在按鈕等不填寫源資料的列時，data[2]會比data[l]長，為了讓後面的型別和資料對應上，應該用m減去count！ var count_none=0;//標記經過了幾個使用資料來源但不顯示的列， for (var l = 4 + pages * rows; l < data.length && (l - pages * rows) < rows + 4; l++) {//遍歷當前頁中的每一條資料 //dataObj2.push(data[l]); count=0;//繪製每一行時都把標記數設為0，其後每檢測到一個標記就+1，data[l][m+count]從資料來源取數 count_none=0; var tr2 = document.createElement("tr");//填寫一個錶行 var tr_mask = document.createElement("tr");//準備給遮罩層用 if (l % 2 == 0&&this.isStripe==1)//偶數的資料行顯示為間隔色 { tr2.style.backgroundColor = this.stripeColor; tr_mask.style.backgroundColor = this.stripeColor; } else { tr2.style.backgroundColor = this.baseColor; tr_mask.style.backgroundColor = this.baseColor; } if(this.showIndex==1)//如果不禁止索引列 { this.InsertaTDPick(tr2, l - 3 + "");//這個是序號 this.InsertaTDPick2(tr_mask, l - 3 + "", this.id);//遮罩層的序號 } for (var m = 0; m < data[2].length; m++)//一行中的一個單元格，這裡可能有多種變化，在length範圍外的資料列不會被考慮 {//根據資料來源的第三個元素中儲存的DOM資訊，為資料的每一列設定不同的控制元件型別！！！！ try { if (data[2][m] == "str") //簡單的字元型別，要限制下寬度！ { this.InsertaTDStr(tr2, data[l][m - count],(data[3][m-count_none]+"px")); if(this.isCollocked>0&&(m+1)<this.isCollocked) { this.InsertaTDStr(tr_mask, data[l][m - count],(data[3][m-count_none]+"px")); } }
在實際使用中發現每一行資料集的元素數和表格每一行的列數並不總是能一一對應，有時表格的列數比資料集元素多，比如不包含資料集的控制元件，有時表格寬度比資料集短，比如某一列資料需要設定為“不可見”，為此設定了count和count_none兩個計數器對錶格和資料集的索引進行調整。
接下來設定每一個數據tr的顏色，並在需要時向tr推入顯示行號的索引列單元格。
然後遍歷資料集這一行的每個資料，根據設定的單元格型別，向tr中推入單元格，對於最簡單的str型單元格使用InsertaTDStr方法向tr中新增，其程式碼如下：
1 /** 2 * 向一個錶行中新增字元型單元格元素 3 * @param tr 錶行ID 4 * @param str 新增字元 5 * @param wid 列寬 6 * @constructor 7 */ 8 Att7.prototype.InsertaTDStr=function(tr,str,wid) 9 { 10 var td=document.createElement("td"); 11 td.style.width=wid?wid:"200px"; 12 if(str==null) 13 { 14 str=""; 15 } 16 td.appendChild(document.createTextNode(str)); 17 tr.appendChild(td); 18 }
接著，如果有鎖定表列，則也向表列鎖定遮罩裡推入這個td。
e、前面的程式碼中還出現了InsertaTDPick和InsertaTDPick2方法，它們的作用是通過點選原表格或鎖定表列遮罩上的行號突出顯示某行資料：
1 //一個可以被選中的單元格，選中後改變單元格所在錶行的顏色以突出顯示 2 Att7.prototype.InsertaTDPick=function (tr,str) 3 { 4 var td=document.createElement("td"); 5 td.appendChild(document.createTextNode(str)); 6 td.style.cursor="crosshair"; 7 var _this=this; 8 td.onclick=function() 9 {//考慮到瀏覽器可能擅自更改背景顏色樣式的字串表示格式，使用一個不顯示的div進行比對 10 if(td.parentNode.style.backgroundColor!=_this.div_temp3.style.backgroundColor) 11 {//如果還沒變色 12 td.parentNode.style.backgroundColor=_this.pickColor; 13 } 14 else 15 { 16 if(_this.isStripe==1) 17 { 18 //如果已經變色則恢復原本顏色 19 if(parseInt(td.innerHTML)%2==0) 20 { 21 td.parentNode.style.backgroundColor = _this.baseColor; 22 } 23 else 24 { 25 td.parentNode.style.backgroundColor = _this.stripeColor; 26 } 27 } 28 else 29 { 30 td.parentNode.style.backgroundColor = _this.baseColor; 31 } 32 } 33 }; 34 tr.appendChild(td); 35 } 36 //這個給遮罩層用,id是表實體的id 37 Att7.prototype.InsertaTDPick2=function (tr,str,id) 38 { 39 var td=document.createElement("td"); 40 td.appendChild(document.createTextNode(str)); 41 td.style.cursor="crosshair"; 42 td.style.width="50px"; 43 var _this=this; 44 td.onclick=function() 45 {//526DA5 46 if(td.parentNode.style.backgroundColor!=_this.div_temp3.style.backgroundColor) 47 { 48 td.parentNode.style.backgroundColor=_this.pickColor;//修改遮罩層 49 ChangeTable(td,_this.pickColor); 50 } 51 else 52 { 53 if(_this.isStripe==1) 54 { 55 if(parseInt(td.innerHTML)%2==0) 56 { 57 td.parentNode.style.backgroundColor = _this.baseColor; 58 ChangeTable(td,_this.baseColor); 59 } 60 else 61 { 62 td.parentNode.style.backgroundColor = _this.stripeColor; 63 ChangeTable(td,_this.stripeColor); 64 } 65 } 66 else 67 { 68 69 } 70 } 71 }; 72 function ChangeTable(obj,color)//遮罩層變化之後，原表格也要變化 73 { 74 var trs=document.getElementById(id).getElementsByTagName("tr")//找實體表然後去修改 75 var leng=trs.length; 76 for(var i=1;i<leng;i++) 77 { 78 if(obj.innerHTML==trs[i].getElementsByTagName("td")[0].innerHTML) 79 { 80 trs[i].getElementsByTagName("td")[0].parentNode.style.backgroundColor=color; 81 } 82 } 83 } 84 tr.appendChild(td); 85 }
f、自定義多樣的單元格型別
att定義了多種常用的複雜報表單元格，也支援您新增自己的單元格型別，時間有限，這裡只舉兩個例子：
limit單元格：資料長度正常時原樣顯示，如果資料長度超過單元格寬度太多，則顯示縮略文字，同時在單元格里插入一個按鈕，點選按鈕彈出小對話方塊顯示完整內容：
1 else if(data[2][m] == "limit")//限制字元長度不能過長 2 { 3 this.InsertaTDStr_lim(tr2, data[l][m - count],(data[3][m-count_none]+"px")); 4 if(collock>0&&(m+1)<collock) 5 { 6 this.InsertaTDStr_lim(tr_mask, data[l][m - count],(data[3][m-count_none]+"px")); 7 } 8 }
1 //限制寬度 2 Att7.prototype.InsertaTDStr_lim= function(tr,str,wid,charwid) 3 {// 4 var td=document.createElement("td"); 5 td.style.width=wid?wid:"200px"; 6 td.style.position="relative"; 7 if(str==null) 8 { 9 str=""; 10 } 11 var num_wid=parseInt(wid.split("px")[0]); 12 var input1 = document.createElement("input"); 13 input1.type="text"; 14 input1.style.border = 0; 15 input1.style.width =num_wid+"px" ;//控制元件寬度 16 input1.style.textAlign = "center"; 17 input1.style.backgroundColor="transparent"; 18 input1.style.float="left"; 19 input1.value=str; 20 input1.readOnly=true; 21 /*input1.onfocus=function(evt){ 22 this.blur();這樣就不能複製貼上了！ 23 }*/ 24 25 if(!charwid)//如果沒有設定字寬 26 { 27 charwid=10; 28 } 29 if((str.length*charwid)>(num_wid*2))//如果文字的長度超過了單元格寬度的兩倍 30 { 31 //td.title=str; 32 //td.overflow="hidden"; 33 //str=(str.substr(0,(num_wid*2/10).toFixed()) +"..."); 34 //嘗試在右側加一個彈出小按鈕？ 35 //str=(str.substr(0,(num_wid*2/10).toFixed()) ); 36 input1.style.width =(num_wid-30)+"px" ; 37 td.appendChild(input1); 38 var btn =document.createElement("button"); 39 btn.className="btn_limlen"; 40 btn.title=str; 41 var _this=this; 42 btn.onclick=function()//通過點選開啟的彈出框需要一個關閉按鈕，通過滑鼠移入開啟的彈出框則隨移出自動關閉 43 { 44 /*if(clipboardData) { 45 clipboardData.clearData(); 46 clipboardData.setData("text", str); 47 } 48 else */ 49 /* 50 if(event.clipboardData) 51 52 {//火狐？ 53 event.clipboardData.clearData(); 54 event.clipboardData.setData("text/plain", str); 55 alert("內容已複製到剪貼簿"); 56 } 57 else if(window.clipboardData) 58 {//IE 59 window.clipboardData.clearData(); 60 window.clipboardData.setData("text", str); 61 alert("內容已複製到剪貼簿"); 62 } 63 */ 64 //clipboardData.getData("text"); 65 var evt=evt||window.event||arguments[0]; 66 cancelPropagation(evt); 67 var obj=evt.currentTarget?evt.currentTarget:evt.srcElement; 68 if(delete_div("div_bz")>0)//清空可能已經顯示的其他小視窗 69 { 70 //return; 71 } 72 Open_div("", "div_bz", 240, 120, 0, 0, obj, "div_tab");//自編