今天項目中要用到該表格找了一遍發現沒有合適的於是自己動手豐衣足食
左側是表頭的表格數據展現
支持多行
多表頭
固定表頭的功能
能夠支持標題
獲取表格中的數據
支持IE/CHROME
表格能夠自適應根據內容行居中
代碼如下:
<!DOCTYPE html PUBLIC "
//W
C//DTD XHTML
Transitional//EN" "
<html xmlns="
<head runat="server">
<title>Grid左側固定測試</title>
<script src=LeftHeadGrid
js></script>
<link href="LeftHeadGrid
css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form
" runat="server">
<div id="testdiv" align="center"></div>
</form>
</body>
<script type="text/javascript" >
var test = new LeftHeadGrid({
id: "leftHeadGrid"
width:
title:"danielinbiti"
perUnitWidth:
rowHeads:[{
width:"
"
rowname:[{name:"日期"}
{name:"數值"}]
}]
columnDatas:[{
width:[
]
rows:[[
]
[
]]
}]
});
test
RenderTo("testdiv");
</script>
</html>
LeftHeadGrid
js
復制代碼 代碼如下:
var LeftHeadGrid = function(config) {
this
rowHeads = config
rowHeads != null ? config
rowHeads: [];//name
this
columnDatas = config
columnDatas != null ? config
columnDatas: [];
this
width = config
width != null ? config
width: "";
this
id = config
id != null ? config
id: "TreGrid";
this
perUnitWidth = config
perUnitWidth != null ? config
perUnitWidth:
;
this
innerWidth =
;
this
innerLWidth =
;
this
height =
;
this
title = config
title != null ? config
title: "";
this
noDataStr = config
noDataStr != null ? config
noDataStr: "no data";
}
LeftHeadGrid
prototype
createGrid = function(){
var totalwidth =
;
var tableHtml = "<table>";
for(var i=
;i<this
rowHeads
length;i++){
var obj = this
rowHeads[i];
var width = obj
width;
totalwidth = totalwidth + parseInt(width);
var rownameobj = obj
rowname;
for(var j=
;j<rownameobj
length;j++){
var nameobj = rownameobj[j];
if(j==rownameobj
length
){
tableHtml = tableHtml + "<tr><td class=
bluelast
width=
" + width + "px
>" + nameobj
name + "</td></tr>";
}else{
tableHtml = tableHtml + "<tr><td class=
bluefirst
width=
" + width + "px
>" + nameobj
name + "</td></tr>";
}
this
height = this
height +
;
}
}
tableHtml = tableHtml + "</table>";
var headHtml = "<div class=
leftheadcss
style=
width:" + totalwidth + "px;
>";
headHtml = headHtml + tableHtml + "</div>";
this
innerLWidth = totalwidth;
this
innerWidth = this
width
totalwidth
;
return headHtml;
}
LeftHeadGrid
prototype
RenderTo =function(divId){
//var innerWidth = this
width
;
var headHtml = this
createGrid();
var html = "<div id=
outframe
class=
outframecss
style=
width:" + this
width + "px;
>"
+ headHtml
+ "<div id=
dataframe
class=
dataframecss
style=
width:" + this
innerWidth + "px;
>"
+ "<div id=
leftgriddataview
class=
innerdivcss
>"
+ "</div>"
+ "</div>"
+ "</div>"
html = "<div id=
divtitle
class=
grittitle
style=
width:" + this
width + "px;height:
px
><big>" + this
title + "</big></div>"
+ html + "</div>";
document
getElementById(divId)
innerHTML = html;
this
show();
}
LeftHeadGrid
prototype
show = function(){
if(this
columnDatas && this
columnDatas
length>
){
var obj = this
columnDatas[
];
var widthArr = obj
width;
var rows = obj
rows;
var totalWidth =
;
for(var i=
;i<widthArr
length;i++){
widthArr[i] = parseInt(widthArr[i])*this
perUnitWidth;
totalWidth = totalWidth + widthArr[i];
}
var tableHtml = "<table width=
"+totalWidth +"
>";
for(var i=
;i<rows
length;i++){
var rowvalueArr = rows[i];
tableHtml = tableHtml + "<tr>";
for(var j=
;j<rowvalueArr
length;j++){
tableHtml = tableHtml + "<td width=
"+widthArr[j]+"px
>" + rowvalueArr[j] + "</td>";
}
tableHtml = tableHtml + "</tr>";
}
tableHtml = tableHtml + "</table>";
if(this
innerWidth>totalWidth){
document
getElementById("dataframe")
style
width=(parseInt(totalWidth))+"px";
document
getElementById("divtitle")
style
width=(parseInt(this
innerLWidth)+parseInt(totalWidth))+"px";
document
getElementById("outframe")
style
width=(parseInt(this
innerLWidth)+parseInt(totalWidth)+
)+"px";
}
document
getElementById("leftgriddataview")
innerHTML = tableHtml;
}else{
document
getElementById("leftgriddataview")
style
height=(this
height+
)+"px";
document
getElementById("leftgriddataview")
innerHTML = this
noDataStr;
}
}
LeftHeadGrid
prototype
addData = function(data){
this
columnDatas = data;
this
show();
}
LeftHeadGrid
prototype
getData = function(){
var rtnObj = new Array();
if(this
columnDatas && this
columnDatas
length>
){
var obj = this
columnDatas[
];
var widthArr = obj
width;
var rows = obj
rows;
for(var i=
;i<rows
length;i++){
var rowvalueArr = rows[i];
for(var j=
;j<rowvalueArr
length;j++){
if(j==
){
rtnObj[i] = rowvalueArr[j];
}else{
rtnObj[i] = rtnObj[i] + "
" + rowvalueArr[j];
}
}
}
}
return rtnObj;
}
LeftHeadGrid
prototype
getHead = function(){
var rtnObj = new Array();
for(var i=
;i<this
rowHeads
length;i++){
var obj = this
rowHeads[i];
var rownameobj = obj
rowname;
for(var j=
;j<rownameobj
length;j++){
var nameobj = rownameobj[j];
if(j==
){
rtnObj[i] = nameobj
name;
}else{
rtnObj[i] = rtnObj[i] + "
" + nameobj
name;
}
}
}
return rtnObj;
}
如果有需要
各位可以自己更改
完整源碼:
代碼如下:
var LeftHeadGrid = function(config) {
this
rowHeads = config
rowHeads != null ? config
rowHeads: [];//name
this
columnDatas = config
columnDatas != null ? config
columnDatas: [];
this
width = config
width != null ? config
width: "";
this
id = config
id != null ? config
id: "TreGrid";
this
perUnitWidth = config
perUnitWidth != null ? config
perUnitWidth:
;
this
innerWidth =
;
this
innerLWidth =
;
this
height =
;
this
title = config
title != null ? config
title: "";
this
noDataStr = config
noDataStr != null ? config
noDataStr: "no data";
}
LeftHeadGrid
prototype
createGrid = function(){
var totalwidth =
;
var tableHtml = "<table>";
for(var i=
;i<this
rowHeads
length;i++){
var obj = this
rowHeads[i];
var width = obj
width;
totalwidth = totalwidth + parseInt(width);
var rownameobj = obj
rowname;
for(var j=
;j<rownameobj
length;j++){
var nameobj = rownameobj[j];
if(j==rownameobj
length
){
tableHtml = tableHtml + "<tr><td class=
bluelast
width=
" + width + "px
>" + nameobj
name + "</td></tr>";
}else{
tableHtml = tableHtml + "<tr><td class=
bluefirst
width=
" + width + "px
>" + nameobj
name + "</td></tr>";
}
this
height = this
height +
;
}
}
tableHtml = tableHtml + "</table>";
var headHtml = "<div class=
leftheadcss
style=
width:" + totalwidth + "px;
>";
headHtml = headHtml + tableHtml + "</div>";
this
innerLWidth = totalwidth;
this
innerWidth = this
width
totalwidth
;
return headHtml;
}
LeftHeadGrid
prototype
RenderTo =function(divId){
//var innerWidth = this
width
;
var headHtml = this
createGrid();
var html = "<div id=
outframe
class=
outframecss
style=
width:" + this
width + "px;
>"
+ headHtml
+ "<div id=
dataframe
class=
dataframecss
style=
width:" + this
innerWidth + "px;
>"
+ "<div id=
leftgriddataview
class=
innerdivcss
>"
+ "</div>"
+ "</div>"
+ "</div>"
html = "<div id=
divtitle
class=
grittitle
style=
width:" + this
width + "px;height:
px
><big>" + this
title + "</big></div>"
+ html + "</div>";
document
getElementById(divId)
innerHTML = html;
this
show();
}
LeftHeadGrid
prototype
show = function(){
if(this
columnDatas && this
columnDatas
length>
){
var obj = this
columnDatas[
];
var widthArr = obj
width;
var rows = obj
rows;
var totalWidth =
;
for(var i=
;i<widthArr
length;i++){
widthArr[i] = parseInt(widthArr[i])*this
perUnitWidth;
totalWidth = totalWidth + widthArr[i];
}
var tableHtml = "<table width=
"+totalWidth +"
>";
for(var i=
;i<rows
length;i++){
var rowvalueArr = rows[i];
tableHtml = tableHtml + "<tr>";
for(var j=
;j<rowvalueArr
length;j++){
tableHtml = tableHtml + "<td width=
"+widthArr[j]+"px
>" + rowvalueArr[j] + "</td>";
}
tableHtml = tableHtml + "</tr>";
}
tableHtml = tableHtml + "</table>";
if(this
innerWidth>totalWidth){
document
getElementById("dataframe")
style
width=(parseInt(totalWidth))+"px";
document
getElementById("divtitle")
style
width=(parseInt(this
innerLWidth)+parseInt(totalWidth))+"px";
document
getElementById("outframe")
style
width=(parseInt(this
innerLWidth)+parseInt(totalWidth)+
)+"px";
}
document
getElementById("leftgriddataview")
innerHTML = tableHtml;
}else{
document
getElementById("leftgriddataview")
style
height=(this
height+
)+"px";
document
getElementById("leftgriddataview")
innerHTML = this
noDataStr;
}
}
LeftHeadGrid
prototype
addData = function(data){
this
columnDatas = data;
this
show();
}
LeftHeadGrid
prototype
getData = function(){
var rtnObj = new Array();
if(this
columnDatas && this
columnDatas
length>
){
var obj = this
columnDatas[
];
var widthArr = obj
width;
var rows = obj
rows;
for(var i=
;i<rows
length;i++){
var rowvalueArr = rows[i];
for(var j=
;j<rowvalueArr
length;j++){
if(j==
){
rtnObj[i] = rowvalueArr[j];
}else{
rtnObj[i] = rtnObj[i] + "
" + rowvalueArr[j];
}
}
}
}
return rtnObj;
}
LeftHeadGrid
prototype
getHead = function(){
var rtnObj = new Array();
for(var i=
;i<this
rowHeads
length;i++){
var obj = this
rowHeads[i];
var rownameobj = obj
rowname;
for(var j=
;j<rownameobj
length;j++){
var nameobj = rownameobj[j];
if(j==
){
rtnObj[i] = nameobj
name;
}else{
rtnObj[i] = rtnObj[i] + "
" + nameobj
name;
}
}
}
return rtnObj;
}
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20355.html
