首页
所有分类
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 相关文章推荐
javascript客户端解决方案 缓存提供程序
Jul 14 Javascript
HTML颜色选择器实现代码
Nov 23 Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
原生js编写2048小游戏
Mar 17 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 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
类加载器(1) Pickle(1) JOIN(1) NoSQL(1) form表单(1) apt命令(1) netty(1) json_extract(1) Launch Mode(1) 缓冲区(1)
You might like
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
PHP数组及条件,循环语句学习
2012/11/11 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
用jscript启动sqlserver
2007/06/21 Javascript
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
python BeautifulSoup使用方法详解
2013/11/21 Python
python实现红包裂变算法
2016/02/16 Python
Python中import机制详解
2017/11/14 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
米兰网婚纱礼服法国网上商店：Milanoo法国
2016/08/20 全球购物
Baby Tulai澳大利亚：美国婴儿背带品牌
2018/10/15 全球购物
工程造价与管理专业应届生求职信
2013/11/23 职场文书
转让协议书范本
2014/09/13 职场文书
村党建工作汇报材料
2014/11/02 职场文书
团组织推荐意见
2015/06/05 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang