一个可拖拽列宽表格实例演示


Posted in Javascript onNovember 26, 2012
<DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
<style> 
body{ 
font:12px/1.5 Tahoma; 
} 
#gannt_left{ 
width:500px; 
} 
#left-scroll-panel{ 
width:520px; 
height:100px; 
overflow-y: auto; 
} 
table{ 
table-layout:fixed; 
border-collapse: collapse; 
border-spacing: 0px; 
text-align:center; 
width:500px; 
} 
table,th,td{ 
border:1px solid #afe0ea; 
} 
th,td{ 
height:20px; 
line-height:20px; 
overflow: hidden; 
text-overflow:ellipsis; 
white-space:nowrap; 
word-wrap:normal; 
word-break:keep-all; 
} 
th{ 
background:#adf5ff; 
} 
td{ 
background:#f6fcff; 
} 
#gannt_grid,#gannt_grid td{ 
border-top:0px none; 
} 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
</head> 
<body> 
<div id="gannt_left"> 
<div id="left-scroll-panel" class="scroll-panel"> 
<table id="gannt_grid"> 
<thead> 
<tr> 
<th width="30">序号</th> 
<th width="35">操作</th> 
<th>标题</th> 
<th width="80">执行人</th> 
<th width="80">开始时间</th> 
<th width="80">结束时间</th> 
<th width="30">天数</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>1</td> 
<td>编辑</td> 
<td>任务标题:阿斯卡是大家啊</td> 
<td>Firefox</td> 
<td>2012-07-15</td> 
<td>2012-08-15</td> 
<td>32</td> 
</tr> 
<tr> 
<td>2</td> 
<td>编辑</td> 
<td>任务标题:阿斯卡是大家啊</td> 
<td>Firefox</td> 
<td>2012-07-15</td> 
<td>2012-08-15</td> 
<td>32</td> 
</tr> 
<tr> 
<td>3</td> 
<td>编辑</td> 
<td>任务标题:阿斯卡是大家啊</td> 
<td>Firefox</td> 
<td>2012-07-15</td> 
<td>2012-08-15</td> 
<td>32</td> 
</tr> 
<tr> 
<td>4</td> 
<td>编辑</td> 
<td>任务标题:阿斯卡是大家啊</td> 
<td>Firefox</td> 
<td>2012-07-15</td> 
<td>2012-08-15</td> 
<td>32</td> 
</tr> 
<tr> 
<td>5</td> 
<td>编辑</td> 
<td>任务标题:阿斯卡是大家啊</td> 
<td>Firefox</td> 
<td>2012-07-15</td> 
<td>2012-08-15</td> 
<td>32</td> 
</tr> 
</tbody> 
</table> 
</div> 
</div> 
<script> 
(function(){ //fixed table header ,还可以封装一下做成类 
var leftScrollPanel = $("#left-scroll-panel"); 
var ganntBody = $("#gannt_grid>tbody"); 
var fixedThead = leftScrollPanel.prev(".fixed-header-tb"); 
if(!fixedThead.length){ 
fixedThead = $('<table class="fixed-header-tb"></table>'); 
fixedThead.append(ganntBody.prev()); 
leftScrollPanel.before(fixedThead); 
}else{ 
//do not create table head again when gannt body repaint, 
//because it is not created in function render 
ganntBody.prev().remove(); 
} 
var tds = ganntBody.find("tr:first>td"); 
var ths = fixedThead.find("th"); 
var thWidth; 
$.each(tds,function(index,td){ 
//jq width() or css('width') may has 1px disparity, use attr width 
thWidth = ths.eq(index).attr("width"); 
(thWidth!=undefined) && $(td).attr("width",thWidth); 
}); 
})(); 
(function(){//table header resize 
var sideOffset = { 
left:null, 
right:null, 
td:null, 
tdLocked:null, 
tdLeft:null, 
tdRight:null 
}; 
var pos = { 
resizedTime:0, 
beginPos:0 
}; 
var tableHead = $(".fixed-header-tb").find("tr:first"); 
var headCellTagName = "th"; 
var bodyHead = $("#gannt_grid>tbody").find("tr:first"); 
var minInterVal = 0; 
var minWidth = 30; 
var borderBeside = 5; 
var notResizeCells = [0,1,6]; 
var freeCells = [2]; 
var forceSize = false; 
var resizeAllow = false; 
var resizing = false; 
var forbiddenResize = function(){ 
var frag = false; 
var o = sideOffset; 
var index = o.td.index(); 
if($.inArray(index,notResizeCells)>-1){ 
frag = true; 
}else if((index==0||$.inArray(index-1,notResizeCells)>-1)&&o.left<=borderBeside){ 
frag = true; 
}else if((index==o.td.siblings().length||$.inArray(index+1,notResizeCells)>-1)&&o.right<=borderBeside){ 
frag = true; 
}else if(o.left>borderBeside&&o.right>borderBeside){ 
frag = true; 
} 
return frag; 
}; 
var stopResize = function(){ 
if(!resizing){return ;} 
resizing = false; 
resizeAllow = false; 
sideOffset = { 
left:null, 
right:null, 
td:null, 
tdLocked:null, 
tdLeft:null, 
tdRight:null 
}; 
}; 
var isFreeCell = function(td){ 
return forceSize==false && $.inArray(td.index(),freeCells)!=-1; 
}; 
tableHead.bind({ 
mousemove:function(e){ 
var th = $(e.target).closest(headCellTagName); 
if(!th.length){ 
return; 
} 
if(!resizing){ 
sideOffset.td = th; 
sideOffset.left = e.pageX - th.offset().left; 
sideOffset.right = th.width()-(e.pageX-th.offset().left); 
if(forbiddenResize()){ 
resizeAllow = false; 
sideOffset.td.css("cursor","default"); 
}else{ 
resizeAllow = true; 
sideOffset.td.css("cursor","e-resize"); 
pos.resizedTime = new Date()*1; 
pos.beginPos = e.pageX; 
} 
return; 
} 
if(sideOffset.tdLocked){ 
th = sideOffset.tdLocked; 
} 
if(new Date()-pos.resizedTime<minInterVal){ 
return; 
}else{ 
pos.resizedTime = new Date()*1; 
} 
var offset = (e.pageX-pos.beginPos); 
if(!offset){ 
return; 
}else{ 
pos.beginPos = e.pageX; 
} 
var leftWidth = sideOffset.tdLeft.width(); 
var rightWidth = sideOffset.tdRight.width(); 
if(offset<0&&leftWidth==minWidth){ 
return; 
}else if(offset>0&&rightWidth==minWidth){ 
return; 
} 
var fixedLWidth,fixedRWidth; 
if(leftWidth-Math.abs(offset)<minWidth&&offset<0){ 
fixedLWidth = minWidth; 
fixedRWidth = rightWidth - (minWidth-leftWidth); 
}else if(rightWidth-offset<minWidth&&offset>0){ 
fixedRWidth = minWidth; 
fixedLWidth = leftWidth - (minWidth-rightWidth); 
}else{ 
fixedLWidth = leftWidth+offset; 
fixedRWidth = rightWidth-offset; 
} 
var adjustCells = [ 
{cell:sideOffset.tdLeft,width:fixedLWidth}, 
{cell:sideOffset.tdRight,width:fixedRWidth} 
]; 
if(offset<0){ 
adjustCells = adjustCells.reverse(); 
} 
var inOneTable = bodyHead.parents("table:first").get(0)==tableHead.parents("table:first").get(0); 
$.each(adjustCells,function(i,cellConf){ 
if(isFreeCell(cellConf.cell)){return;} 
cellConf.cell.attr("width",cellConf.width); 
if(!inOneTable){ 
bodyHead.children().eq(cellConf.cell.index()).attr("width",cellConf.width); 
} 
}); 
}, 
mousedown:function(){ 
if(!resizeAllow){ 
return; 
} 
sideOffset.tdLocked = sideOffset.td; 
if(sideOffset.left<=5){ 
sideOffset.tdRight = sideOffset.td; 
sideOffset.tdLeft = sideOffset.td.prev(); 
}else{ 
sideOffset.tdRight = sideOffset.td.next(); 
sideOffset.tdLeft = sideOffset.td; 
} 
resizing = true; 
return false; 
} 
}); 
$(document).bind("mouseup",stopResize); 
})(); 
</script> 
</body> 
</html>
Javascript 相关文章推荐
javascript 操作Word和Excel的实现代码
Oct 26 Javascript
php跨域调用json的例子
Nov 13 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 Javascript
JS编程小常识很有用
Nov 26 #Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 #Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 #Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 #Javascript
JavaScript mapreduce工作原理简析
Nov 25 #Javascript
jquery div 居中技巧应用介绍
Nov 24 #Javascript
js实现在文本框光标处添加字符的方法介绍
Nov 24 #Javascript
You might like
二招解决php乱码问题
2012/03/25 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
php读取本地json文件的实例
2018/03/07 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
Python下载指定页面上图片的方法
2016/05/12 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
简历上的自我评价
2014/02/03 职场文书
升国旗演讲稿
2014/09/05 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
大连导游词
2015/02/12 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
七个非常实用的Python工具包总结
2021/06/15 Python
Go并发4种方法简明讲解
2022/04/06 Golang