Today, this table is used in the project. I searched it once and found that there is no suitable one, so I tried to improve myself.
The final presentation effect is as follows,
1. The table data in the header is displayed on the left,
2. Supports multiple rows and multiple headers
3. Fixed Header Function
4. Titles supported
5. Get the data in the table
6. Support for IE/CHROME
7. The table can be automatically centered Based on the Content row
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> fixed tests on the left of the Grid </title>
<Script src = LeftHeadGrid. js> </script>
<Link href = "LeftHeadGrid.css" rel = "stylesheet" type = "text/css"/>
</Head>
<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>
</Html>
LeftHeadGrid. jsCopy codeThe Code is 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 = 'outframework' class = 'outframecss 'style = 'width:" + this. width + "px;'>"
+ HeadHtml
+ "<Div id = 'dataframe 'class = 'dataframecss' style = 'width:" + this. innerWidth + "px; '>"
+ "<Div id = 'leftgriddataview 'class = 'nerdivcss'>"
+ "</Div>"
+ "</Div>"
+ "</Div>"
Html = "<div id = 'divtitle' class = 'grittitle' style = 'width:" + this. width + "px; height: 30px '> <big>" + this. title + "</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;
}
You can change it as needed.
Complete source code:
Http://xiazai.jb51.net/201306/yuanma/LeftHeadGrid_jb51net.rarCopy codeThe Code is 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 = 'outframework' class = 'outframecss 'style = 'width:" + this. width + "px;'>"
+ HeadHtml
+ "<Div id = 'dataframe 'class = 'dataframecss' style = 'width:" + this. innerWidth + "px; '>"
+ "<Div id = 'leftgriddataview 'class = 'nerdivcss'>"
+ "</Div>"
+ "</Div>"
+ "</Div>"
Html = "<div id = 'divtitle' class = 'grittitle' style = 'width:" + this. width + "px; height: 30px '> <big>" + this. title + "</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;
}