JQuery表格拖动调整列宽效果(自己动手写的)


Posted in Javascript onSeptember 01, 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

Javascript 相关文章推荐
jQuery cdn使用介绍
May 08 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
js给table赋值的实例代码
Oct 13 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
javascript 取小数点后几位几种方法总结
Aug 02 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 #Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 #Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 #Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 #Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 #Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 #Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 #Javascript
You might like
使用字符串函数输出整数化的PHP版本号
2006/10/09 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
PHP中cookie知识点学习
2018/05/06 PHP
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
js限制文本框只能输入中文的方法
2015/08/11 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
node中的session的具体使用
2018/09/14 Javascript
webpack优化的深入理解
2018/12/10 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Django实现分页功能
2018/07/02 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
python中比较两个列表的实例方法
2019/07/04 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
what is the difference between ext2 and ext3
2013/11/03 面试题
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
上课迟到检讨书
2014/02/19 职场文书
上课看小说检讨书
2014/02/22 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
团组织推荐意见
2015/06/05 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏