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 DOM模型操作
Dec 28 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
js特效,页面下雪的小例子
Jun 17 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
jQuery中事件与动画的总结分享
May 24 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
Javascript中的解构赋值语法详解
Apr 02 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抽奖小程序的实现代码
2013/06/18 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
javascript window.opener的用法分析
2010/04/07 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
js转义字符介绍
2013/11/05 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
react 生命周期实例分析
2020/05/18 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
wxpython 学习笔记 第一天
2009/02/09 Python
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
体育教师自荐信范文
2013/12/16 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
参观接待方案
2014/03/17 职场文书
高一军训的心得体会
2014/09/01 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
2015年高校就业工作总结
2015/05/04 职场文书