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 相关文章推荐
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 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文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
TopList标签和JavaScript结合两例
2007/08/12 Javascript
javascript XML数据显示为HTML一例
2008/12/23 Javascript
js change,propertychange,input事件小议
2011/12/20 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
python算法表示概念扫盲教程
2017/04/13 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
python版飞机大战代码分享
2018/11/20 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
python解释器spython使用及原理解析
2019/08/24 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
python实现粒子群算法
2020/10/15 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
体育专业个人的求职信范文
2013/09/21 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
2015年元旦活动总结
2014/05/09 职场文书
入党积极分子群众意见
2015/06/01 职场文书
KTV员工管理制度
2015/08/06 职场文书
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript