左侧是表头的JS表格控件

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

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

时间： 2024-03-18 09:43:31

左侧是表头的JS表格控件的相关文章

.net表格控件里面有哪个是同时带分表头的功能也带统计的功能！？

问题描述 .net表格控件里面有哪个是同时带分表头的功能也带统计的功能!?

在web中js实现类似excel的表格控件_javascript技巧

Execl功能非常强大,内置的很多函数或公式可以大大提高对数据的加工处理能力.那么在web中有没有类似的控件呢?经过一番搜寻,发现handsontable具备了基本的excel功能支持公式,同时能对数据进行实时编辑.另外支持拖动复制.Ctrl+C .Ctrl+V 等等.在浏览器支持方面,它支持以下的浏览器: IE7+, FF, Chrome, Safari, Opera. 首先引入相关库文件,公式支持不包含在handsontable.full.js中,需要单独引入:  <script src=&qu

ExtJS 配置和表格控件

ExtJS是一套完整的RIA解决方案,也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现,对客户端机器性能也有一定的要求,即不支持IE6以下的版本.如果您的项目对网页响应时间有严格的限制,或者客户端操作系统过于陈旧,一定不要选择ExtJS. 本文主要是介绍ExtJS的下载和配置以及一些简单的使用方法.目前最新版本为3.0,但是本文主要介绍2.2版本. 一.ExtJS下载以及配置 1.下载地址:www.extjs.com/(这是官网,大家可以选择自己喜欢的版本下

简约JS日历控件代码

这篇文章介绍了一款简约JS日历控件的全部代码,有需要的朋友可以参考一下   运行结果如下: 复制代码 代码如下: <script type="text/javascript" language="javascript"> function choose_date_czw(date_id,objtd){ if(date_id=="choose_date_czw_close"){     document.getElementByIdx_

硕正 表格控件-硕正软件的表格控件能做到页面打开后就立即加载吗

问题描述 硕正软件的表格控件能做到页面打开后就立即加载吗 当一个页面有多个硕正表格控件时,如果不等所有表格全部加载出来,就通过选择按钮加载表格数据,会造成部分未加载出来的表格不能正常插入数据,此时直接保存页面的话会造成数据丢失. 尝试过写js方法将控件在页面标题加载(因为标题是最先加载的)前加载表格控件,但由于表格比较多的时候,加载时间也是比较长的,此时选择操作在表格加载前就进行的话,还是会丢失数据,不知道该怎么办了. 解决方案 http://bbs.csdn.net/topics/391907

ExtJS 配置和表格控件使用第1/2页_extjs

ExtJS是一套完整的RIA解决方案,也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现,对客户端机器性能也有一定的要求,即不支持IE6以下的版本.如果您的项目对网页响应时间有严格的限制,或者客户端操作系统过于陈旧,一定不要选择ExtJS. 本文主要是介绍ExtJS的下载和配置以及一些简单的使用方法.目前最新版本为3.0,但是本文主要介绍2.2版本. 一.ExtJS下载以及配置 1.下载地址:www.extjs.com/(这是官网,大家可以选择自己喜欢的版本下

可选择小时和分钟的js日历控件

js|控件|日历 需要找一个 可选择小时和分钟的js日历控件,google了一通没有,最后在一个姐姐的blog上面找到了个修改自梅花雨控件的半成品,错误不少,改了半天终于能用了,放上来希望对大家的工作有帮助.   <script language="javascript">...  /**//**//**//** *使用方法: * (1)只选择日期   <input type="text" name="date"   readO

精确到分钟的js日历控件,日期选择器代码

  精确到分钟的js日历控件,日期选择器代码,我们知道一般的日历控件是可以选择日期的,但是您有没有见过可以精确到选择分钟的?除了选择年.月.日外,还可以选择时间,够精确吧,希望大家喜欢哦.JS日历插件,这是比较常用的网页特效哦. 示例: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>精确到分钟的js日历控件</T

JS分页控件 可用于无刷新分页

今天无意看到了这个分页控件,不过使用方法不是很清楚没有研究,.大家可以自行研究,里面的函数写法倒是不错,需要内容的结合   JS分页控件,可用于无刷新分页 复制代码 代码如下: function PagerBar(recordcount, pagesize, pageindex, showpagecount) {     var NumberRegex = new RegExp(/^d+$/);     this.PageIndex = 1; //页索引,当前页     if (pageinde