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


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 相关文章推荐
js判断样式className同时增加class或删除class
Jan 30 Javascript
JSON+JavaScript处理JSON的简单例子
Mar 20 Javascript
Javascript学习指南
Dec 01 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
vue filter 完美时间日期格式的代码
Aug 14 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
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实现将Session写入数据库
2015/07/26 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
python算法学习之计数排序实例
2013/12/18 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
求职简历中的自我评价分享
2013/12/08 职场文书
秋游活动策划方案
2014/02/16 职场文书
留学顾问岗位职责
2014/04/14 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB