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 相关文章推荐
JQuery 简便实现页面元素数据验证功能
Mar 24 Javascript
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
javascript打印输出json实例
Nov 11 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
python实现海螺图片的方法示例
2019/05/12 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
ECHT官方网站:男女健身服
2020/02/14 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
护理学毕业生自荐信
2013/10/02 职场文书
会计毕业生自荐信
2013/11/21 职场文书
初中生期末评语大全
2014/04/24 职场文书
中班幼儿评语大全
2014/04/30 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
党员个人总结范文
2015/02/14 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
班级联欢会主持词
2015/07/03 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
小学音乐课教学反思
2016/02/18 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
python随机打印成绩排名表
2021/06/23 Python