首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

左侧是表头的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; 
}

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
Vue组件简易模拟实现购物车
Dec 21 Vue.js
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
Tablespace(1) pytz(1) 内置函数(1) harbor(1) V Rising(1) 自定义函数(1) GoFrame(3) procedure(1) commit(1) Navicat(1)
You might like
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
PHP可变函数学习小结
2015/11/29 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
第一次接触JS require.js模块化工具
2016/04/17 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
React-Native左右联动List的示例代码
2017/09/21 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
python类共享变量操作
2020/09/03 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
化学实验员岗位职责
2013/12/28 职场文书
自动化职业生涯规划书范文
2014/01/03 职场文书
学生会主席竞聘书
2014/03/31 职场文书
父母对孩子的寄语
2014/04/09 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
Golang jwt身份认证
2022/04/20 Golang