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


Posted in Javascript onJune 04, 2013

今天,项目中要用到该表格,找了一遍,发现没有合适的,于是自己动手丰衣足食。
左侧是表头的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.3water.com/201306/yuanma/LeftHeadGrid_3waternet.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; 
}
Javascript 相关文章推荐
javascript针对DOM的应用实例(一)
Apr 15 Javascript
asm.js使用示例代码
Nov 28 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
vue axios请求超时的正确处理方法
Apr 02 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
JS访问对象两种方式区别解析
Aug 29 Javascript
js判断undefined变量类型使用typeof
Jun 03 #Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 #Javascript
js+css实现增加表单可用性之提示文字
Jun 03 #Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 #Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 #Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 #Javascript
jQuery实现单行文字间歇向上滚动源代码
Jun 02 #Javascript
You might like
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
python下如何让web元素的生成更简单的分析
2008/07/17 Python
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
身边的榜样活动方案
2014/08/20 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
python tkinter Entry控件的焦点移动操作
2021/05/22 Python