今天，项目中要用到该表格，找了一遍，发现没有合适的，于是自己动手丰衣足食。

 

最终呈现效果如上图，

1、左侧是表头的表格数据展现，

2、支持多行，多表头

3、固定表头的功能

4、能够支持标题

5、获取表格中的数据

6、支持IE/CHROME

7、 表格能够自适应根据内容行居中

Grid左侧固定测试

var test = new LeftHeadGrid({

id: "leftHeadGrid",

width: 800,

title:"danielinbiti",

perUnitWidth:300,

rowHeads:[{

width:"60",

rowname:[{name:"日期"},{name:"数值"}]

}],

columnDatas:[{

width:[1,1],

rows:[[10130501,101011],[2,3]]

}]

});

test.RenderTo("testdiv");

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: 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 = "

for(var i=0;i

var obj = this.rowHeads[i];

var width = obj.width;

totalwidth = totalwidth + parseInt(width);

var rownameobj = obj.rowname;

for(var j=0;j

var nameobj = rownameobj[j];

if(j==rownameobj.length-1){

tableHtml = tableHtml + "

" + nameobj.name + "";

}else{

tableHtml = tableHtml + "

" + nameobj.name + "";

}

this.height = this.height + 40;

}

}

tableHtml = tableHtml + "

";

var headHtml = "

";

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 = "

"

html = "

"

+ html + "