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 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
使用vue-router设置每个页面的title方法
Feb 11 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
vue 弹出遮罩层样式实例
Jul 22 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
摩卡咖啡
2021/03/03 咖啡文化
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
javascript jQuery插件练习
2008/12/24 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
javaScript动态添加Li元素的实例
2018/02/24 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
js实现随机div颜色位置 类似满天星效果
2019/10/24 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
python3 读写文件换行符的方法
2018/04/09 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
Python中函数参数匹配模型详解
2019/06/09 Python
python3 xpath和requests应用详解
2020/03/06 Python
python实现ftp文件传输功能
2020/03/20 Python
网上蛋糕店创业计划书
2014/01/24 职场文书
个人对照检查材料
2014/02/12 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
公司租车协议书
2015/01/29 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python