重构一段基于原生JavaScript的表格绘制代码

为了在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;//默认显示数据集的第一页，初始索引为0
21         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="
38             "float: left;line-height: 20px">    " +
39             "
" +
40             " 详情" +
41             "42             "background: url(../../ASSETS/IMAGE/close.png) no-repeat;border: 0px;vertical-align:top onclick="delete_div(div_bz);" type=submit> " +
43             "
 " +
44             " 
";
45         this.html_onmouseover=//鼠标移入时弹出的小文本提示框
46             "
47             "style="width: 100%;height: 100%;margin: 0px;border: 1px solid;padding: 0px;float: left;line-height: 20px">    " +
48                 "" +
<span style="color: #008080;">49</span>                 " " +
50             "
";
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";

                 

                                                                                                                    
                         云服务器
                                             
                         GPU云服务器
                                                                                                                                                 
                                      
                     
                    
                                                                                               原生的javascript
                                                                                                           绘制表格
                                                                                                           代码重构
                                                                                                           基于javascript的webgis开发