Today, the project to use the form, looked for again, found no suitable, so their hands and clothing.
The final rendering effect, as shown above,
1, the left side is the table header of the table data display,
2, support multiple lines, multiple table head
3, fixed the function of the table head
4, can support the title
5, get the data in the table
6. Support Ie/chrome
7, the table can be adaptively based on the Content line center
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>grid left fixed test </title>
<script src=leftheadgrid.js></script>
<link href= "Leftheadgrid.css" rel= "stylesheet" type= "Text/css"/>
<body>
<form id= "Form1" runat= "Server" >
<div id= "Testdiv" align= "center" ></div>
</form>
</body>
<script type= "Text/javascript" >
var test = new Leftheadgrid ({
ID: "Leftheadgrid",
width:800,
Title: "Danielinbiti",
PERUNITWIDTH:300,
rowheads:[{
Width: "60",
Rowname:[{name: "Date"},{name: "Value"}]
}],
columndatas:[{
width:[1,1],
rows:[[10130501,101011],[2,3]]
}]
});
Test. Renderto ("Testdiv");
</script>
Leftheadgrid.js
Copy Code code as follows:
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:10;
this.innerwidth = 0;
this.innerlwidth = 0;
this.height = 0;
this.title = Config.title!= null? Config.title: "";
THIS.NODATASTR = Config.nodatastr!= null? CONFIG.NODATASTR: "No data";
}
LeftHeadGrid.prototype.createGrid = function () {
var totalwidth = 0;
var tablehtml = "<table>";
for (Var i=0;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=0;j<rownameobj.length;j++) {
var nameobj = rownameobj[j];
if (j==rownameobj.length-1) {
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 + 40;
}
}
tablehtml = tablehtml + "</table>";
var headhtml = "<div class= ' leftheadcss ' style= ' width:" + totalwidth + "px; ' > ";
headhtml = headhtml + tablehtml + "</div>";
This.innerlwidth = totalwidth;
This.innerwidth = this.width-totalwidth-5;
return headhtml;
}
LeftHeadGrid.prototype.RenderTo =function (divid) {
var innerwidth = this.width-100;
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:30px ' ><big>" + this.tit Le + "</big></div>"
+ HTML + "</div>";
document.getElementById (divid). InnerHTML = html;
This.show ();
}
LeftHeadGrid.prototype.show = function () {
if (This.columndatas && this.columndatas.length>0) {
var obj = this.columndatas[0];
var widtharr = obj.width;
var rows = obj.rows;
var totalwidth = 0;
for (Var i=0;i<widtharr.length;i++) {
Widtharr[i] = parseint (widtharr[i]) *this.perunitwidth;
Totalwidth = totalwidth + widtharr[i];
}
var tablehtml = "<table width= '" +totalwidth + "' >";
for (Var i=0;i<rows.length;i++) {
var rowvaluearr = rows[i];
tablehtml = tablehtml + "<tr>";
for (Var j=0;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) +4) + "px";
}
document.getElementById ("Leftgriddataview"). InnerHTML = tablehtml;
}else{
document.getElementById ("Leftgriddataview"). style.height= (this.height+4) + "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>0) {
var obj = this.columndatas[0];
var widtharr = obj.width;
var rows = obj.rows;
for (Var i=0;i<rows.length;i++) {
var rowvaluearr = rows[i];
for (Var j=0;j<rowvaluearr.length;j++) {
if (j==0) {
Rtnobj[i] = Rowvaluearr[j];
}else{
Rtnobj[i] = Rtnobj[i] + "," + rowvaluearr[j];
}
}
}
}
return rtnobj;
}
LeftHeadGrid.prototype.getHead = function () {
var rtnobj = new Array ();
for (Var i=0;i<this.rowheads.length;i++) {
var obj = this.rowheads[i];
var rownameobj = Obj.rowname;
for (Var j=0;j<rownameobj.length;j++) {
var nameobj = rownameobj[j];
if (j==0) {
Rtnobj[i] = Nameobj.name;
}else{
Rtnobj[i] = Rtnobj[i] + "," + nameobj.name;
}
}
}
return rtnobj;
}
If necessary, you can change your own
Complete Source:
Http://xiazai.jb51.net/201306/yuanma/LeftHeadGrid_jb51net.rar
Copy Code code as follows:
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:10;
this.innerwidth = 0;
this.innerlwidth = 0;
this.height = 0;
this.title = Config.title!= null? Config.title: "";
THIS.NODATASTR = Config.nodatastr!= null? CONFIG.NODATASTR: "No data";
}
LeftHeadGrid.prototype.createGrid = function () {
var totalwidth = 0;
var tablehtml = "<table>";
for (Var i=0;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=0;j<rownameobj.length;j++) {
var nameobj = rownameobj[j];
if (j==rownameobj.length-1) {
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 + 40;
}
}
tablehtml = tablehtml + "</table>";
var headhtml = "<div class= ' leftheadcss ' style= ' width:" + totalwidth + "px; ' > ";
headhtml = headhtml + tablehtml + "</div>";
This.innerlwidth = totalwidth;
This.innerwidth = this.width-totalwidth-5;
return headhtml;
}
LeftHeadGrid.prototype.RenderTo =function (divid) {
var innerwidth = this.width-100;
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:30px ' ><big>" + this.tit Le + "</big></div>"
+ HTML + "</div>";
document.getElementById (divid). InnerHTML = html;
This.show ();
}
LeftHeadGrid.prototype.show = function () {
if (This.columndatas && this.columndatas.length>0) {
var obj = this.columndatas[0];
var widtharr = obj.width;
var rows = obj.rows;
var totalwidth = 0;
for (Var i=0;i<widtharr.length;i++) {
Widtharr[i] = parseint (widtharr[i]) *this.perunitwidth;
Totalwidth = totalwidth + widtharr[i];
}
var tablehtml = "<table width= '" +totalwidth + "' >";
for (Var i=0;i<rows.length;i++) {
var rowvaluearr = rows[i];
tablehtml = tablehtml + "<tr>";
for (Var j=0;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) +4) + "px";
}
document.getElementById ("Leftgriddataview"). InnerHTML = tablehtml;
}else{
document.getElementById ("Leftgriddataview"). style.height= (this.height+4) + "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>0) {
var obj = this.columndatas[0];
var widtharr = obj.width;
var rows = obj.rows;
for (Var i=0;i<rows.length;i++) {
var rowvaluearr = rows[i];
for (Var j=0;j<rowvaluearr.length;j++) {
if (j==0) {
Rtnobj[i] = Rowvaluearr[j];
}else{
Rtnobj[i] = Rtnobj[i] + "," + rowvaluearr[j];
}
}
}
}
return rtnobj;
}
LeftHeadGrid.prototype.getHead = function () {
var rtnobj = new Array ();
for (Var i=0;i<this.rowheads.length;i++) {
var obj = this.rowheads[i];
var rownameobj = Obj.rowname;
for (Var j=0;j<rownameobj.length;j++) {
var nameobj = rownameobj[j];
if (j==0) {
Rtnobj[i] = Nameobj.name;
}else{
Rtnobj[i] = Rtnobj[i] + "," + nameobj.name;
}
}
}
return rtnobj;
}
