左侧是表头的JS表格控件

于 2013-06-04 09:06:00 发布 · 869 阅读 · 2
文章标签：

#javascript #前端 #json #ViewUI

本文介绍了一种自定义表格的生成与展示方法，包括表头的多行、多表头支持，固定表头功能，标题获取，以及适应不同浏览器的能力。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


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


最终呈现效果如上图，

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

2、支持多行，多表头

3、固定表头的功能

4、能够支持标题

5、获取表格中的数据

6、支持IE/CHROME

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

<!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>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:"日期"},{name:"数值"}]
    }],
    columnDatas:[{
        width:[1,1],
        rows:[[10130501,101011],[2,3]]
    }]
});
test.RenderTo("testdiv");
</script>
</html>


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 = "<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.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;
}


如果有需要，各位可以自己更改

完整源码:

http://download.youkuaiyun.com/detail/danielinbiti/5509927

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.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;
}

iteye_19603
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值