Java Script的Scroll Grid

1)文件构成

TestScrollGrid.html
css<div>
    scrollgrid.css
js  <div>
    scrollgrid.js

2)scrollgrid.css

.scrollGrid { border : 1px #8f8f8f solid;}.fixedTitle{ border : 0px; display : table-cell;}.rowTitle{ border-right : 1px #8f8f8f solid; display : table-cell; overflow-x : hidden;}.colTitle{ border-bottom : 1px #8f8f8f solid; display : table-cell; overflow-y : hidden; vertical-align : top;}.scrollBody{ overflow : scroll; display : table-cell; vertical-align : top;}.fixedTitle table,.rowTitle table,.colTitle table,.scrollBody table{ table-layout : fixed;}.fixedTitle th, .rowTitle th, .colTitle th, .scrollBody th{ border-right : 1px #8f8f8f solid; border-bottom : 1px #8f8f8f solid; background : #cfcfcf;}.fixedTitle td, .rowTitle td, .colTitle td, .scrollBody td{ border-right : 1px #8f8f8f solid; border-bottom : 1px #8f8f8f solid;}

 

3)scrollgrid.js

/* * System Name : Java Script Componet * Sub System : Grid * Copy Right : All rights reserved, Copyright(C), FreeWork. * Date : 8:54 2009/05/26 * Author : FLYBIRD * Revision : 1.00 */function ScrollGrid() { //------------------------------ //properties //------------------------------ this.cols = 5; this.rows = 10; this.fixCols = 2; this.fixRows = 1; this.width = 400; this.height = 150; this.id = "scrollGrid"; this.colWidths = [100,100,100,100,100]; this.titles = new Array(); this.values = new Array(); //------------------------------ //methods //------------------------------ this.toHTML = function() { var fixWidth = 0; var strHTML; //top left for (var col = 0; col< this.fixCols; col++) { fixWidth += this.colWidths[col]; } strHTML = "<span class=/"fixedTitle/" style="/" mce_style="/""width:" + fixWidth + "px;/">"; strHTML += "<table border=/"0/" cellpadding=/"0/" cellspacing=/"0/">"; for (var col = 0; col< this.fixCols; col++) { strHTML += "<col width=/"" + this.colWidths[col] + "px/">"; //width } strHTML += "<tr>"; for (var col = 0; col< this.fixCols; col++) { strHTML += "<th>" + this.titles[col] + "</th>"; //title } strHTML += "</tr>"; strHTML += "</table></span>"; //top right strHTML += "<span class=/"rowTitle/" style="/" mce_style="/""width:" + (this.width - fixWidth - 19) + "px;/">"; strHTML += "<table border=/"0/" cellpadding=/"0/" cellspacing=/"0/">"; for (var col = this.fixCols; col< this.cols; col++) { strHTML += "<col width=/"" + this.colWidths[col] + "px/">"; //width } strHTML += "<tr>"; for (var col = this.fixCols; col< this.cols; col++) { strHTML += "<th>" + this.titles[col] + "</th>"; //title } strHTML += "</tr>"; strHTML += "</table></span>"; strHTML += "<br/>"; //bottom left strHTML += "<span class=/"colTitle/" style="/" mce_style="/"""; strHTML += "width:" + fixWidth + "px;" strHTML += "height:" + (this.height - 19) + "px;" strHTML += "/">"; strHTML += "<table border=/"0/" cellpadding=/"0/" cellspacing=/"0/">"; for (var col = 0; col < this.fixCols; col++) { strHTML += "<col width=/"" + this.colWidths[col] + "px/">"; //width } for (var row = this.fixRows; row < this.rows || row <= this.values.length; row ++) { strHTML += "<tr>" for (var col = 0; col < this.fixCols; col++) { strHTML += "<td>" try { strHTML += this.values[row-1][col]; } catch (e) { strHTML += " "; } strHTML += "</td>"; } strHTML += "</tr>" } strHTML += "</table></span>"; //bottom right strHTML += "<span class=/"scrollBody/" style="/" mce_style="/"""; strHTML += "width:" + (this.width - fixWidth -2) + "px;" strHTML += "height:" + (this.height - 2) + "px;" strHTML += "/">"; strHTML += "<table border=/"0/" cellpadding=/"0/" cellspacing=/"0/">"; for (var col = this.fixCols; col< this.cols; col++) { strHTML += "<col width=/"" + this.colWidths[col] + "px/">"; //width } for (var row = this.fixRows; row < this.rows || row <= this.values.length; row ++) { strHTML += "<tr>" for (var col = this.fixCols; col< this.cols; col++) { strHTML += "<td>" try { strHTML += this.values[row-1][col]; } catch (e) { strHTML += " "; } strHTML += "</td>"; } strHTML += "</tr>" } strHTML +="</table></span>"; return strHTML; } //show this.show = function() { //create grid div var gridDiv = document.getElementById(this.id); if (gridDiv == null) { gridDiv = document.createElement("div"); gridDiv.id = this.id; gridDiv.className = "scrollGrid"; gridDiv.style.width = this.width; gridDiv.style.height = this.height; //append treeview div to body document.body.appendChild(gridDiv); } gridDiv.innerHTML = this.toHTML(); var colTitleSpan, rowTitleSpan,scrollBodySpan; var spans = gridDiv.getElementsByTagName("SPAN"); for (var i = 0; i < spans.length; i++) { if (spans[i].className == "colTitle") { colTitleSpan = spans[i]; } else if (spans[i].className == "rowTitle") { rowTitleSpan = spans[i]; } else if (spans[i].className == "scrollBody") { scrollBodySpan = spans[i]; } } //follow scroll scrollBodySpan.onscroll= function () { colTitleSpan.scrollTop = scrollBodySpan.scrollTop; rowTitleSpan.scrollLeft = scrollBodySpan.scrollLeft; } //row color var colTitleTable = colTitleSpan.childNodes[0]; var scrollBodTable = scrollBodySpan.childNodes[0]; setTableColor(colTitleTable); setTableColor(scrollBodTable); function setTableColor(table) { for (var row = 0;row < table.rows.length; row++) { table.rows[row].style.backgroundColor = row % 2 == 0 ? "" : "#efefef"; table.rows[row].onmouseover = function() { colTitleTable.rows[this.rowIndex].style.backgroundColor = "#FFFFCC"; scrollBodTable.rows[this.rowIndex].style.backgroundColor = "#FFFFCC"; } table.rows[row].onmouseout = function() { colTitleTable.rows[this.rowIndex].style.backgroundColor = this.rowIndex % 2 == 0 ? "" : "#efefef"; scrollBodTable.rows[this.rowIndex].style.backgroundColor = this.rowIndex % 2 == 0 ? "" : "#efefef"; } } } }}

 

4)TestScrollGrid.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>Scroll Grid</title> <link rel="stylesheet" type="text/css" href="css/scrollgrid.css" mce_href="css/scrollgrid.css"/> <mce:script type="text/javascript" src="js/scrollgrid.js" mce_src="js/scrollgrid.js"></mce:script></head><body> <h1>Scroll Grid Test</h1> <mce:script type="text/javascript"><!-- var scrollGrid1 = new ScrollGrid(); scrollGrid1.width = 600; scrollGrid1.height = 150; scrollGrid1.fixCols = 2; scrollGrid1.colWidths = [100,100,150,150,150]; scrollGrid1.titles = ["T1","T2","T3","T4","T5"]; scrollGrid1.values = [ ["T1","T1","T1","T1","T1"], ["T2","T2","T2","T2","T2"], ["T3","T3","T3","T3","T3"]]; scrollGrid1.show(); // --></mce:script></body></html>