In order to easily display a list of skills and effects in the CardSimulate project, I decided to refactor a piece of JavaScript code I had written to convert a specific JavaScript data object into a table, the ATT Table Drawing library. Supports fine style Settings and some complex reporting capabilities and provides free extensibility. Can use the new Chrome browser visit https://ljzc002.github.io/Att/HTML/TEST/AttSample.html for the new code example, the introduction of the old code see: https://www.cnblogs.com/ljzc002/p/5511510.html.
Initialize the table object from the table class
The old code directly treated the table object as a global variable. The new code defines a table class, and each table object is an instance of the table class. This makes it easy to add multiple table objects to a page and organize the workflow and properties of multiple tables. The initialization code for the table object is as follows:
1 /** 2 * Created by Administrator on 2015/5/11. 3 */ 4 / Att7=function() 8 {9 10} 11 Att7.prototype.init=function(param) {this.base=param.base; This. id=param.id; // table id 17 //this.left=param.left? param.left:0; //this. Top =param.top? param.top:0; This.rowsp =param.rowsp? param.rowsp:50; // This. Page_current =param.page_current? param.page_current:0; 21 this.isStripe= param.isstripe? param.isStripe:1; // This triadic operation does not apply to booleans ！！！！ 22 This. isThlocked=param.isThlocked? param.isThlocked:0; 23 this.iscollocked = param.iscollocked? param.isCollocked:0; This. ShowIndex = param.showindex? param.showIndex:1; BaseColor = param.basecolor? param.baseColor:"#ffffff"; // The default background color is white, and the interval color is background color. The brightness is reduced by 1/16. param.stripeColor:"#eeeeee"; 27 this.pickcolor = param.pickcolor? param.pickColor:"#97ceef"; 28 this.div_temp1=document.createElement("div"); / / these div is used for the background color is used in the comparison, because different browsers have different ways to the preservation of the background color of this. 29 div_temp1. Style. The backgroundColor = this. BaseColor; Div 30 this.div_temp2=document.createElement("div"); / / preserved in the same way to compare color 31 enclosing div_temp2. Style. The 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"; This.num_toolhei =param.num_toolhei? param.num_toolhei:80; 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>"; 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(" Table initialization exception!" +e); 55 return false; 56 } 57 return "ok"; 58}Copy the codeThe properties of the table object are set here, the dom tag color comparison problem is solved with undisplayed divs on lines 28 through 33, and two widgets are defined for later calls on lines 37 through 50. The init method is called as follows:
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,// Not including index columns? - includes 10 baseColor:"# 00FF00 ", 11 stripeColor:"# 00AA00 ", 12 pickColor:"#97ceef" 13} 14 if(table1.init(objp)=="ok") 15 {// Below is the data displayCopy the code2. Establishment of table containers:
The DOM structure of the table is as follows:
Where all_base is the total container of all table-related elements, div_tool is the tool area above the table where some controls can be placed to select filtering conditions, div_tab is the area where the main body of the table is located, table1 is the dom generated according to the data. The three DIV_masks are the DOM masks used to lock table headers or table columns.
The stylesheet files used are as follows:
1 /* 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 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; /* Lock header */ 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 rounded */ 33-webkit-border-radius: 3px; /* Webkit browsers */ border-radius:3px; /* W3C syntax */ position: absolute; 34 top: 6px; right: 4px; }Copy the codeUnfortunately, because the debugging process of the CSS mentioned above is so long that I have forgotten why I set it up like this, if you use it and you get elements that are out of place for no reason, please debug it yourself.
3. Start table drawing
Start the table drawing with the draw method of the table object
The draw method is called as follows:
1 if(table1.init(objp)=="ok") 2 {3 var obj_datas=[4 "test table ", 5 [" test meter ", "test meter", "test meter", "test meter", "test meter", "test meter", "test meter", "test header"]. 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 Class4, [" button ", ", "button", "80 px", [" height ", "10 px"]] 13, [" a ", "class5", [" height ", "10 px"]] 14], 15 [100200300400500600700800]. 16 ["value1","value2value2value2value2value2value2value2value2value2value2","value1","value2","value1","value2","value1","v alue2"], 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); 21 requestAnimFrame(function(){table1.AdjustWidth(); }); 22}Copy the codeObj_datas is a custom data object that can be sent from a back-end application or assembled in the foreground. RequestAnimFrame is a method taken from Google WebGL’s library to “wait a little while” until the browser has finished rendering the table container, and then resize the table to make it tighter.
The delay code is as follows:
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}) ();Copy the code4. Introduction to table drawing code:
A, first do some preparation related to the page turning of the form:
1 att7.prototype. draw=function(data,page_current) {3 this. totalPages =0; 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; If (page_current<0) 14 {15 alert(" ); 16 this.page_current=0; 17} 18 else if(page_current>=this. totalPages) 19 {20 alert(" reach the end of data "); 21 this.page_current=this.totalpages-1; 22 } 23 else 24 { 25 this.page_current=page_current; 26}Copy the codeBecause ATT puts the generation of all DOM tags on the browser side, all data can be read from the background to the front end at one time, which is paginated by the front end JavaScript program. (Traditional table drawing tools mostly put DOM label generation in background programs, and paging operations are mostly performed at the database level in order to reduce background pressure)
Page turning method code is as follows:
1 / / 2 page processing Att7. Prototype. ChangePage = function (flag) 3 {4 document. Body. Style. Cursor = 'wait'; 5 Switch (flag)// Different page turning actions correspond to different page numbers 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; AdjustColor() = 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 }Copy the codeDepending on the different parameters of the ChangePage method, you can do four different page flips, and you can set up four more buttons where you need them, but the page flips are really just the draw method that changes the parameters. T_page_span and c_page_SPAN are two SPAN tags that display the total number of pages and the current number of pages. AdjustColor is an optional method to iterate over cells after drawing a table and change the color of cells that meet certain conditions as needed. (Not used here)
B. Clean up tables with the same ID that may have been drawn before starting drawing:
This. Data =data; Var tab_data; //table tag 4 var tab_colmask; Tab_data = document.getelementById (this.id); // If (document.getelementById (this.id)); // If (document.getelementById (this.id)) 8 var parent = tab_data.parentNode; 9 parent.removeChild(tab_data); If (document.getelementById ("div_thmask")) {12 var div = document.getelementById ("div_thmask"); / / it seems such a set can't support a page at the same time there are multiple locking header table 13 div. ParentNode. RemoveChild (div); 14} 15 if(document.getelementbyid ("tab_mask2")) {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"); 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; 35 var obj=this.base; / / this attribute may be 36 if id string may also be the object itself (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); 46 this.div_table=div_table; 47 tab_data = document.getElementById(this.id);Copy the code
C. Table header drawing and mask principle
Drawing headers in a simple table is not complicated:
1 var tr1 = document.createElement("tr"); If (this.showIndex==1) {4 this.InsertaTHStr(tr1, "The first" + (enclosing page_current + 1) + "page", enclosing str_indexwid); 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); / / put the tr in table 11 tr1. Style. The backgroundColor = this. BaseColor;Copy the codeInsertaTHStr inserts th into tr, tr, column name, column width, and data.
InsertaTHStr code is as follows:
4 * @param tr table row ID 5 * @param STR Add character 6 * @param WID column width (char 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}Copy the codeHowever, things get complicated when you need to lock the table header or lock the table column. Then draw the code for the table header:
1 this.arr_lock=[]; This. Arr_locky =[]; Var div_thmask=document.createElement("div"); var div_thmask=document.createElement("div"); if(this.isthlocked ==1) 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"; Div_thmask. style.left=compPos2(div_table). Left +this.left+"px"; 13 div_thmask.style.width="6000px"; 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"); InsertaTHStr(tr_thmask, "" + (this.page_current + 1) +" page ", this.str_indexwid); 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); } 33 if(this.iscollocked >0)// draw a mask layer for the locked table columns. 34 {35 this.arr_lock.push(["tab_mask2",1,0]); 36 this.arr_lock.push(["div_bz",0,0]); // the first argument is the id of the tag to lock, the second argument is whether to lock, and the third argument is the initial horizontal offset of the tag. 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"); If (this.showindex ==1) {49 this.insertathstr (tr_mask, "" + (this.page_current + 1) +" page ", 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); If ((this.isthlocked ==1)&&(this.iscollocked >0)) 59 {60 Enclosing 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"; 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"); 77.InsertaTHStr(tr_thmask, "" + (this.page_current + 1) +" page ", this.str_indexwid); 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}Copy the codeTable header lock table column lock First set the all_base size to the container size of all_base (in this case equal to the window size), then set div_table wide enough (default 4000px) and height to a finite value of all_base height minus div_Tools height, In this way, when the table has a large number of rows and div_table has focus, you can use the mouse wheel to control the contents of div_table to scroll up and down, and because div_table is wider than ALL_BASE, the div_table slider is hidden.
When the contents of div_table are scrolled up and down, div_thmask and div_THMASk3 are positioned outside div_table to All_BASE, so it will not be affected by div_table scrolling, and then set z-index higher. It looks like the contents of the table are scrolling and the table head is locked.
For table column locking, first disable all_base sliding up and down, only keep sliding left and right, because div_TABLE is wider than ALL_BASE, so the left and right slider of ALL_base always exists, listen for the sliding event of all_base, adjust the horizontal position of div_MASk2 on each slide, To make it look like the table column is locked.
When both headers and columns are locked, div_THMask3 is at the top of the masks to show the effect of both working together.
The all_base slide responds as follows:
1 Att7. Prototype. ScrollLock = function () / / drag the slider, pop-up layer with drag to move 2 {3 var mask2left = 0; 4 var mask2top=0; 5 var scrollleft=document.getElementById("all_base").scrollLeft; Var scrollTop = document.getelementById ("all_base").scrolltop; var scrollTop = document.getelementById ("all_base"). 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}Copy the codeAdjustWidth = AdjustWidth (AdjustWidth) In AdjustWidth mode (AdjustWidth)
1 / / to correct high let the mask layer width and the underlying agreement 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) {// If (THS [0].offsetwidth) this.div_table.style.height=this.div_parent.offsetHeight-this.num_toolhei-12+"px"; 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"; 39 var _this=this; 39 var _this=this; 40 requestAnimFrame(function () {41 _adjustWidth () _adjustWidth ()) So keep this object with _this 42}); 43} 44} 45}Copy the codeIf you want to add dynamic column width to a table, you can call this method after the column width changes; Alternatively, if you want to keep div_table and ALL_BAS tightly aligned after the browser size changes, you can set this method to respond to the REsize event.
D. Draw the simplest table content:
If (this.rowsp > 0) {var rows=this.rowsp; if (this.rowsp > 0); Var pages=this.page_current; var pages=this.page_current; Var collock= this.iscollocked; Var count=0; Data [2] is longer than data[l]. M minus count! var count_none=0; For (var l = 4 + pages * rows; l < data.length && (l - pages * rows) < rows + 4; Dataobj2.push (data[l]); dataobj2.push (data[l]); count=0; Count_none =0; count_none=0; count_none=0; var tr2 = document.createElement("tr"); Var tr_mask = document.createElement("tr"); var tr_mask = document.createElement("tr"); / / for mask layer with the if (l % 2 = = 0 && enclosing isStripe = = 1) / / the even line shows the data interval color {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)// If (this. InsertaTDPick(tr2, l - 3 + ""); InsertaTDPick2(tr_mask, l - 3 + "", this.id); } for (var m = 0; m < data[2].length; M++)// a cell in a row, where there may be multiple variations, and data columns outside the length range are not considered {// set a different control type ！！！！ for each column of the data, depending on the DOM information stored in the third element of the data source 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")); }}Copy the codeIn practice, it is found that the number of elements in each row of data set does not always correspond to the number of columns in each row of the table. Sometimes the number of columns in the table is more than the number of elements in the data set, such as the control that does not contain the data set. Sometimes the width of the table is shorter than the data set, such as the data in a certain column needs to be set as “invisible”. Two counters, count and count_None, are set to adjust the indexes of the table and dataset.
Next, set the color of each data TR and push indexed column cells showing row numbers into tr as needed.
We then iterate over each row of the dataset, pushing cells into TR based on the cell type we set, and adding cells to TR using the InsertaTDStr method for the simplest STR cell, which looks like this:
1 /** 2 * Add character cell element to a table row 3 * @param tr table row ID 4 * @param STR Add character 5 * @param WId column width 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}Copy the codeThen, if there are locked table columns, the TD is also pushed into the table column lock mask.
The InsertaTDPick and InsertaTDPick2 methods highlight a row by clicking on the original table or by locking the row number on the table column mask:
1 // A cell that can be selected, Cells in the table rows selected by change color to highlight 2 Att7. Prototype. InsertaTDPick = function (tr, STR) 3 {4 var td = document. CreateElement method (" td "); 5 td.appendChild(document.createTextNode(str)); 6 td.style.cursor="crosshair"; 7 var _this=this; 9 8 td. Onclick = function () {/ / given a string representation of the browser may alter any background color style format, using a div is not displayed in 10 if (td) parentNode) style. The backgroundColor! = _this. Div_temp3. 11 style. BackgroundColor) {/ / 12 td. If you haven't change color parentNode. Style. The backgroundColor. = _this pickColor; 19 if(parseInt(td.innerhtml)%2==0) 20 {21 if(parseInt(td.innerhtml)%2==0) 20 {21 if(parseInt(td.innerhtml)%2==0 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 / / use this to mask layer, id is the id 37 Att7 table entity 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; // Change the mask layer 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) 74 {var TRS = document.getelementById (id).getelementsbytagName ("tr"); 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}Copy the codeF. Customize various cell types
Att defines a variety of commonly used complex report cells and also allows you to add your own cell types. In limited time, here are just two examples:
Limit cell: When the data length is normal, it will be displayed as is. If the data length exceeds the cell width too much, the thumbnail text will be displayed. At the same time, insert a button in the cell, click the button to pop up a small dialog box to display the complete content:
1 else if(data[2][m] == "limit") 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")); 8 7}}Copy the code1 / / limit the width of the 2 Att7. Prototype. InsertaTDStr_lim = function (tr, STR, wid, charwid) 3 {/ var / 4 td = document. The createElement method (" 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" ; // Control width 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(); So you can't copy and paste! 23 }*/ 24 25 if(! Charwid)// If the width is not set to 26 {27 charwid=10; 28} 29 if((str.length*charwid)>(num_wid*2)) 30 {//td.title= STR; 32 //td.overflow="hidden"; 33 //str=(str.substr(0,(num_wid*2/10).toFixed()) +"..." ); 34 // Try adding a pop-up button on the right side? 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()// Open the popup by clicking a close button, 43 {44 /*if(clipboardData) {45 clipboarddata.clearData (); 46 clipboardData.setData("text", str); 47} 48 else */ 49 /* 50 if(event.clipboarddata) 51 52 {// Firefox? 53 event.clipboardData.clearData(); 54 event.clipboardData.setData("text/plain", str); 55 alert(" Content copied to clipboard "); 56 } 57 else if(window.clipboardData) 58 {//IE 59 window.clipboardData.clearData(); 60 window.clipboardData.setData("text", str); 61 alert(" Content copied to clipboard "); 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)// clear other small Windows that may have been displayed 69 {70 //return; 71 } 72 Open_div("", "div_bz", 240, 120, 0, 0, obj, "div_tab"); Var target={top:,left:} var target={top:,left:} Open_div2("div_bz", "div_bz", 240, 120, 0, 0, obj, "div_tab"); 75 document.querySelectorAll("#div_bz")[0].innerHTML = _this.html_onclick; / / to the pop-up item in writing structure (small control) of the definition of initialization phase before 76 document. QuerySelectorAll (" # div_bz. Div_inmod_lim_content ") [0]. The innerHTML = STR; 77 } 78 td.appendChild(btn); 79 } 80 else 81 { 82 td.appendChild(input1); 83 } 84 85 tr.appendChild(td); 86}Copy the codeSelect: The cell is a drop-down box that triggers events when the user changes options
1 else if (data[2][m][0] == "select") 2 {3 var td2 = document.createElement("td"); 4 //td2.style.width = "100px"; 5 td2.style.width=(data[3][m-count_none]+"px"); 6 var select = document.createElement("select"); 7 select.className = data[2][m][1]; 8 select.style.width = "100px"; 9 select.selectedIndex=0; 10 var temp_i=0; For (var I = 0; i < data[2][m][2].length; i++) 12 { 13 var option = document.createElement("option"); 14 option.innerHTML = data[2][m][2][i][0]; 15 the if (data [2] [m] [2] [I] [1]) {/ / and if so wouldn't mind set a value of 16 option. The value = data [2] [m] [2] [I] [1]. 17 } 18 select.appendChild(option); 19 the if (data [2] [m] [2] [I] [1] = = data [l] [m - count] | | data [2] [m] [2] [I] [0] = = data [l] [m - count]) / / pass the background value can also be the text may be!! 20 {// If this option matches the data in the dataset, the default option is 21 option.selected="selected"; 22 select.selectedIndex=i; 23 temp_i=i; 24 } 25 } 26 listenEvent(select,"change",select_onchange); Select. Datachange =data[2][m][3]; 28 function select_onchange() 29 { 30 var evt = evt || window.event||arguments[0]; 31 cancelPropagation(evt); // Find that if the event is not blocked, the click of button1 will be triggered accordingly!! ?? 32 var obj=evt.currentTarget? evt.currentTarget:evt.srcElement; 33 //dataObj2[parseInt(this.parentNode.parentNode.firstChild.innerHTML)%150-1][parseInt(this.className.split("*")[1])]=this .value; 34 eval((obj.getAttribute("datachange")? obj.getAttribute("datachange"):obj.datachange)); 35 } 36 /*select.onchange=function() 37 { 38 var evt = evt || window.event; 39 cancelPropagation(evt); // Find that if the event is not blocked, the click of button1 will be triggered accordingly!! ?? 40 //dataObj2[parseInt(this.parentNode.parentNode.firstChild.innerHTML)%150-1][parseInt(this.className.split("*")[1])]=this .value; 41 eval(data[2][m][3]); 42 }*/ 43 td2.appendChild(select); 44 tr2.appendChild(td2); 45 if(collock>0&&(m+1)<collock) 46 {47 /*var td2a = document.createElement("td"); 48 td2a.style.width=(data[3][m-count_none]+"px"); 49 var selecta=select.cloneNode(true); 50 selecta.datachange=data[2][m][3]; 51 td2a.appendChild(selecta); */ 52 var td2a=td2.cloneNode(true); Var selecta=td2a.childNodes[0]; 54 selecta.datachange=data[2][m][3]; 55 selecta.selectedIndex=temp_i; 56 tr_mask.appendChild(td2a); 57 listenEvent(selecta,"change",select_onchange); 59 58}}Copy the code5, summary
Att reconstruction has been basically completed, and all the places using jQuery in the old version have been replaced with the native JavaScript methods. Although the compatibility of the native methods is not as good as jQuery, considering the use of WebGL with narrower compatibility, these compatibility losses can be ignored. Refactor the code has not been fully tested, there may be various problems, you can access the https://ljzc002.github.io/Att/HTML/TEST/AttSample.html test cell type.