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 相关文章推荐
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
javascript制作loading动画效果 loading效果
Jan 14 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
小程序图片长按识别功能的实现方法
Aug 30 Javascript
详解js常用分割取字符串的方法
May 15 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
什么是短波收听SWL
2021/03/01 无线电
PHP开发大型项目的一点经验
2006/10/09 PHP
菜鸟学PHP之Smarty入门
2007/01/04 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
json跟xml的对比分析
2008/06/10 Javascript
jQuery插件 tabBox实现代码
2010/02/09 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
vue mounted组件的使用
2018/06/18 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
原生JS实现天气预报
2020/06/16 Javascript
Python中subprocess的简单使用示例
2015/07/28 Python
Python 多线程实例详解
2017/03/25 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
python遍历路径破解表单的示例
2020/11/21 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
音乐专业自荐信
2014/02/07 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
市场调查策划方案
2014/06/10 职场文书
信访工作个人总结
2015/03/03 职场文书
2015年科室工作总结
2015/04/10 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
员工手册董事长致辞
2015/07/29 职场文书