JQuery拖动表头边框线调整表格列宽效果代码


Posted in Javascript onSeptember 10, 2014

类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整。最近比较空闲,便自己动手尝试实现,在此分享下小小的成果。

首先需要如图所示的鼠标图标文件,在自己的硬盘中搜索*.cur,肯定能找到。

为了能在所有需要该效果的页面使用,并且不需要更改页面任何HTML,我把所有的代码整合在 $(document).ready(function() {}); 中,并写入一个独立的JS文件。

用一个1像素宽的DIV来模拟一条竖线,在页面载入后添加到body元素中

$(document).ready(function() {
$("body").append("<div id=\"line\" style=\"width:1px;height:200px;border-left:1px solid #00000000; position:absolute;display:none\" ></div> ");
});

接下来是鼠标移动到表格纵向边框上鼠标变型的问题,起初我考虑在表头中添加一个很小的块级元素触发mousemove 和mouseout事件,但为了简单起见,我还是选择为整个表头添加该事件。

在TH的mousemove事件中处理鼠标变型:

$("th").bind("mousemove", function(event) {
var th = $(this);
//不给第一列和最后一列添加效果
if (th.prevAll().length <= 1 || th.nextAll().length < 1) {
return;
}
var left = th.offset().left;
//距离表头边框线左右4像素才触发效果
if (event.clientX - left < 4 || (th.width() - (event.clientX - left)) < 4) {
th.css({ 'cursor': '/web/Page/frameset/images/splith.cur' });
//修改为你的鼠标图标路径
}
else {
th.css({ 'cursor': 'default' });
}
});

当鼠标按下时,显示竖线,并设置它的高度,位置CSS属性,同时记录当前要改变列宽的TH对象,因为一条边框线由两个TH共享,这里总是取前一个TH对象。

$("th").bind("mousedown", function(event) {
var th = $(this);
//与mousemove函数中同样的判断
if (th.prevAll().length < 1 | th.nextAll().length < 1) {
return;
}
var pos = th.offset();
if (event.clientX - pos.left < 4 || (th.width() - (event.clientX - pos.left)) < 4) {
var height = th.parent().parent().height();
var top = pos.top;
$("#line").css({ "height": height, "top": top,"left":event .clientX,"display":"" });
//全局变量,代表当前是否处于调整列宽状态
lineMove = true;
//总是取前一个TH对象
if (event.clientX - pos.left < th.width() / 2) {
currTh = th.prev();
}
else {
currTh = th;
}
}
});

接下来是鼠标移动时,竖线随之移动的效果,因为需要当鼠标离开TH元素也要能有该效果,该效果写在BODY元素的mousemove函数中

$("body").bind("mousemove", function(event) {
if (lineMove == true) {
$("#line").css({ "left": event.clientX }).show();
}
});

最后是鼠标弹起时,最后的调整列宽效果。这里我给BODY 和TH两个元素添加了同样的mouseup代码。我原先以为我只需要给BODY添加mouseup函数,但不明白为什么鼠标在TH中时,事件没有触发,我只好给TH元素也添加了代码。水平有限,下面完全重复的代码不知道怎么抽出来。

$("body").bind("mouseup", function(event) {
if (lineMove == true) {
$("#line").hide();
lineMove = false;
var pos = currTh.offset();
var index = currTh.prevAll().length;
currTh.width(event.clientX - pos.left);
currTh.parent().parent().find("tr").each(function() {
$(this).children().eq(index).width(event.clientX - pos.left);
});
}
});
$("th").bind("mouseup", function(event) {
if (lineMove == true) {
$("#line").hide();
lineMove = false;
var pos = currTh.offset();
var index = currTh.prevAll().length;
currTh.width(event.clientX - pos.left);
currTh.parent().parent().find("tr").each(function() {
$(this).children().eq(index).width(event.clientX - pos.left);
});
}
});

好了,只要在需要这个效果的页面中引入包含以上代码的JS文件,就可以为页面中表格添加该效果。

另外以上代码在火狐中自定义鼠标图标的代码没出效果,所用的jquery为1.2.6

————————————————————————更新——————————————

关于拖动时会选中内容的BUG,将以下一行代码添加到$(document).ready函数里就行了

$("body").bind("selectstart", function() { return !lineMove; });
Javascript 相关文章推荐
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
js实现广告漂浮效果的小例子
Jul 02 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
VueJS全面解析
Nov 10 Javascript
angularJS深拷贝详解
Mar 23 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 #Javascript
javascipt:filter过滤介绍及使用
Sep 10 #Javascript
用javascript将数据导入Excel示例代码
Sep 10 #Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 #Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 #Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 #Javascript
使用typeof方法判断undefined类型
Sep 09 #Javascript
You might like
PHP has encountered an Access Violation
2007/01/15 PHP
php中定义网站根目录的常用方法
2010/08/08 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
基于PHP静态类的原罪详解
2013/05/06 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
jQuery html()等方法介绍
2009/11/18 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
js charAt的使用示例
2014/02/18 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
python字典序问题实例
2014/09/26 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
英语师范专业毕业生自荐信
2013/09/21 职场文书
计算机专业毕业生自我鉴定
2014/01/16 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
物流专业自荐信
2014/05/23 职场文书
文秘应届生求职信
2014/07/05 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
2015毕业寄语大全
2015/02/26 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
MySQL update set 和 and的区别
2021/05/08 MySQL
Python竟然能剪辑视频
2021/05/25 Python
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python