左侧是表头的JS表格控件(自写,网上没有的)_javascript技巧



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

最终呈现效果如上图，
1、左侧是表头的表格数据展现，
2、支持多行，多表头
3、固定表头的功能
4、能够支持标题
5、获取表格中的数据
6、支持IE/CHROME
7、 表格能够自适应根据内容行居中
代码如下:











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;ivar obj = this.rowHeads[i];
var width = obj.width;
totalwidth = totalwidth + parseInt(width);
var rownameobj = obj.rowname;

for(var j=0;jvar nameobj = rownameobj[j];
if(j==rownameobj.length-1){
tableHtml = tableHtml + "

";
}else{
tableHtml = tableHtml + "";
}
this.height = this.height + 40;
}
}
tableHtml = tableHtml + "

" + nameobj.name + "

" + nameobj.name + "

";
var headHtml = "";
headHtml = headHtml + tableHtml + "";
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 = ""
+ headHtml
+ ""
+ ""
+ ""
+ ""
+ ""
html = "" + this.title + ""
+ html + "";
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;iwidthArr[i] = parseInt(widthArr[i])*this.perUnitWidth;
totalWidth = totalWidth + widthArr[i];
}
var tableHtml = "

";
for(var i=0;ivar rowvalueArr = rows[i];
tableHtml = tableHtml + "";
for(var j=0;jtableHtml = tableHtml + "";
}
tableHtml = tableHtml + "";
}
tableHtml = tableHtml + "

" + rowvalueArr[j] + "

";
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;ivar rowvalueArr = rows[i];
for(var j=0;jif(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;ivar obj = this.rowHeads[i];
var rownameobj = obj.rowname;

for(var j=0;jvar nameobj = rownameobj[j];
if(j==0){
rtnObj[i] = nameobj.name;
}else{
rtnObj[i] = rtnObj[i] + "," + nameobj.name;
}
}
}
return rtnObj;
}

如果有需要，各位可以自己更改
完整源码:
http://xiazai.jb51.net/201306/yuanma/LeftHeadGrid_jb51net.rar
代码如下:
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;ivar obj = this.rowHeads[i];
var width = obj.width;
totalwidth = totalwidth + parseInt(width);
var rownameobj = obj.rowname;

for(var j=0;jvar nameobj = rownameobj[j];
if(j==rownameobj.length-1){
tableHtml = tableHtml + "

";
}else{
tableHtml = tableHtml + "";
}
this.height = this.height + 40;
}
}
tableHtml = tableHtml + "

" + nameobj.name + "

" + nameobj.name + "

";
var headHtml = "";
headHtml = headHtml + tableHtml + "";
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 = ""
+ headHtml
+ ""
+ ""
+ ""
+ ""
+ ""
html = "" + this.title + ""
+ html + "";
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;iwidthArr[i] = parseInt(widthArr[i])*this.perUnitWidth;
totalWidth = totalWidth + widthArr[i];
}
var tableHtml = "

";
for(var i=0;ivar rowvalueArr = rows[i];
tableHtml = tableHtml + "";
for(var j=0;jtableHtml = tableHtml + "";
}
tableHtml = tableHtml + "";
}
tableHtml = tableHtml + "

" + rowvalueArr[j] + "

";
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;ivar rowvalueArr = rows[i];
for(var j=0;jif(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;ivar obj = this.rowHeads[i];
var rownameobj = obj.rowname;

for(var j=0;jvar nameobj = rownameobj[j];
if(j==0){
rtnObj[i] = nameobj.name;
}else{
rtnObj[i] = rtnObj[i] + "," + nameobj.name;
}
}
}
return rtnObj;
}