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


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 相关文章推荐
读jQuery之三(构建选择器)
Jun 11 Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
js实现3D旋转效果
Aug 18 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
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
php $_ENV为空的原因分析
2009/06/01 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
php发送post请求函数分享
2014/03/06 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
编写Js代码要注意的几条规则
2010/09/10 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
2015/12/01 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
简单谈谈python中的Queue与多进程
2016/08/25 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
PHP面试题及答案一
2012/06/18 面试题
老师对学生的寄语
2014/04/09 职场文书
小学生评语大全
2014/04/18 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
装修公司管理制度
2015/08/05 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript