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 相关文章推荐
关于文本限制字数的js代码
Apr 02 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 Javascript
JavaScript数组和对象的复制
Mar 21 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 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
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
PHP可变变量学习小结
2015/11/29 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
Thinkphp 框架基础之入口文件功能、定义与用法分析
2020/04/27 PHP
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
前端如何实现动画过渡效果
2021/02/05 Javascript
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
python操作oracle的完整教程分享
2018/01/30 Python
python实现关键词提取的示例讲解
2018/04/28 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
python组合无重复三位数的实例
2018/11/13 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
台湾三立电视电商平台:电电购
2019/09/09 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
工程造价专业大专生求职信
2013/10/06 职场文书
研究生求职推荐信范文
2013/11/30 职场文书
优秀教师工作感言
2014/02/16 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
英文演讲稿开场白
2014/08/25 职场文书
师范生见习报告范文
2014/11/03 职场文书
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技