首页
所有分类
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 相关文章推荐
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
javascript检测浏览器flash版本的实现代码
Dec 06 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
全面解析JavaScript里的循环方法之forEach，for-in，for-of
Apr 20 Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
vue基于element的区间选择组件
Sep 07 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
sout(1) Sentry(1) 输入法(2) 403(1) 404(1) 滚动条(1) macos(1) CAD(1) svg(1) Sunmao(1)
You might like
dedecms模版制作使用方法
2007/04/03 PHP
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
CodeIgniter启用缓存和清除缓存的方法
2014/06/12 PHP
php常用文件操作函数汇总
2014/11/22 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
jquery 插件开发方法小结
2009/10/23 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
JQuery中each()的使用方法说明
2010/08/19 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
全面理解闭包机制
2016/07/11 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
python数值基础知识浅析
2019/11/19 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
南非最受欢迎的时尚品牌：MRP
2016/09/18 全球购物
YesBabyOnline美国：全球性的在线婚纱礼服工厂
2018/05/05 全球购物
求最大连续递增数字串（如＂ads3sl456789DF3456ld345AA＂中的＂456789＂）
2015/09/11 面试题
办公室秘书自我鉴定
2014/01/18 职场文书
消防安全员岗位职责
2014/03/10 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle