今天项目中要用到该表格找了一遍发现没有合适的于是自己动手丰衣足食
左侧是表头的表格数据展现
支持多行
多表头
固定表头的功能
能够支持标题
获取表格中的数据
支持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: [];//namethis
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: [];//namethis
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;}
