html表格左侧表头,左侧是表头的JS表格控件(⾃写,⽹上没有
的)
今天,项⽬中要⽤到该表格,找了⼀遍,发现没有合适的,于是⾃⼰动⼿丰⾐⾜⾷。
baritone
最终呈现效果如上图,
1、左侧是表头的表格数据展现,
2、⽀持多⾏,多表头
3、固定表头的功能
4、能够⽀持标题
5、获取表格中的数据
6、⽀持IE/CHROME
7、 表格能够⾃适应根据内容⾏居中
Grid左侧固定测试
var test = new LeftHeadGrid({
id: "leftHeadGrid",
width: 800,
title:"danielinbiti",
perUnitWidth:300,
pleasure怎么读rowHeads:[{
width:"60",
rowname:[{name:"⽇期"},{name:"数值"}]
}],
columnDatas:[{
width:[1,1],
rows:[[10130501,101011],[2,3]]
}]釜山英文
compass
});
test.RenderTo("testdiv");脏话英文
LeftHeadGrid.js
var LeftHeadGrid = function(config) {
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: "";
}
ateGrid = function(){
var totalwidth = 0;
var tableHtml = "
粗口词
for(var i=0;i
var obj = wHeads[i];
var width = obj.width;
totalwidth = totalwidth + parInt(width);
var rownameobj = wname;
for(var j=0;j
var nameobj = rownameobj[j];
areyousureif(j==rownameobj.length-1){
tableHtml = tableHtml + "
" + nameobj.name + "";
}el{
tableHtml = tableHtml + "
" + nameobj.name + "";
}
this.height = this.height + 40;
}
}
tableHtml = tableHtml + "
hnie";
var headHtml = "
";
headHtml = headHtml + tableHtml + "
";
this.innerLWidth = totalwidth;
this.innerWidth = this.width-totalwidth-5;
return headHtml;
ftg}
LeftHeadGrid.prototype.RenderTo =function(divId){ //var innerWidth = this.width-100;
var headHtml = ateGrid();
var html = "profitability
"
+ headHtml
+ "
"
+ "
"
+ "
"
+ "
"
+ "
"
html = "
" + this.title + "
"
+ html + "
";