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


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实现二分查找法实现代码
Nov 12 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
别了 JavaScript中的isXX系列
Aug 01 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
微信小程序实现文字跑马灯效果
May 26 Javascript
JS简单添加元素新节点的方法示例
Feb 10 Javascript
微信小程序实现弹出层效果
May 26 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 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
discuz安全提问算法
2007/06/06 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
Javascript调用C#代码
2011/01/17 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
[51:15]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-GAMING
2014/05/22 DOTA
python通过函数属性实现全局变量的方法
2015/05/16 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
Saltstack快速入门简单汇总
2016/03/01 Python
python 链接和操作 memcache方法
2017/03/04 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
弄虚作假心得体会
2014/09/10 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
自主招生英文自荐信
2015/03/25 职场文书
2015年推普周活动总结
2015/03/27 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
老乡聚会通知
2015/04/23 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书