JQuery 表格拖动调整列宽效果
类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整。最近比较空闲,便自己动手尝试实现,在此分享下小小的成果。
首先需要如图所示的鼠标图标文件,在自己的硬盘中搜索*.cur,肯定能找到。
为了能在所有需要该效果的页面使用,并且不需要更改页面任何HTML,我把所有的代码整合在 $(document).ready(function() {}); 中,并写入一个独立的JS文件。
用一个1像素宽的DIV来模拟一条竖线,在页面载入后添加到body元素中
1
2
3
|
$(document).ready( function () $( "body" ).append( "<div ); }); |
接下来是鼠标移动到表格纵向边框上鼠标变型的问题,起初我考虑在表头中添加一个很小的块级元素触发mousemove 和mouseout事件,但为了简单起见,我还是选择为整个表头添加该事件。
在TH的mousemove事件中处理鼠标变型:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
$( "th" ).bind( "mousemove" , function (event) var th this ); //不给第一列和最后一列添加效果 if (th.prevAll().length return ; } var left //距离表头边框线左右4像素才触发效果 if (event.clientX th.css({ 'cursor' : '/web/Page/frameset/images/splith.cur' }); //修改为你的鼠标图标路径 } else { th.css({ 'cursor' : 'default' }); } }); |
当鼠标按下时,显示竖线,并设置它的高度,位置CSS属性,同时记录当前要改变列宽的TH对象,因为一条边框线由两个TH共享,这里总是取前一个TH对象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
$( "th" ).bind( "mousedown" , function (event) var th this ); //与mousemove函数中同样的判断 if (th.prevAll().length return ; } var pos if (event.clientX var height var top $( "#line" ).css({ "height" : "top" : "left" :event "display" : "" }); //全局变量,代表当前是否处于调整列宽状态 lineMove true ; //总是取前一个TH对象 if (event.clientX currTh } else { currTh } } }); |
接下来是鼠标移动时,竖线随之移动的效果,因为需要当鼠标离开TH元素也要能有该效果,该效果写在BODY元素的mousemove函数中
1
2
3
4
5
|
$( "body" ).bind( "mousemove" , function (event) if (lineMove true ) $( "#line" ).css({ "left" : } }); |
最后是鼠标弹起时,最后的调整列宽效果。这里我给BODY 和TH两个元素添加了同样的mouseup代码。我原先以为我只需要给BODY添加mouseup函数,但不明白为什么鼠标在TH中时,事件没有触发,我只好给TH元素也添加了代码。水平有限,下面完全重复的代码不知道怎么抽出来。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
$( "body" ).bind( "mouseup" , function (event) if (lineMove true ) $( "#line" ).hide(); lineMove false ; var pos var index currTh.width(event.clientX currTh.parent().parent().find( "tr" ).each( function () $( this ).children().eq(index).width(event.clientX }); } }); $( "th" ).bind( "mouseup" , function (event) if (lineMove true ) $( "#line" ).hide(); lineMove false ; var pos var index currTh.width(event.clientX currTh.parent().parent().find( "tr" ).each( function () $( this ).children().eq(index).width(event.clientX }); } }); |
好了,只要在需要这个效果的页面中引入包含以上代码的JS文件,就可以为页面中表格添加该效果。
另外以上代码在火狐中自定义鼠标图标的代码没出效果,所用的jquery为1.2.6
效果文件下载:http://files.cnblogs.com/xxfss2/changeTh.js
————————————————————————2012-8-16更新——————————————
关于拖动时会选中内容的BUG,将以下一行代码添加到$(document).ready函数里就行了
$("body").bind("selectstart", function() { return !lineMove; });
http://www.cnblogs.com/xxfss2/archive/2011/01/21/1941567.html
JQuery 表格拖动调整列宽效果的更多相关文章
- MS WORD 表格自己主动调整列宽,自己主动变美丽,依据内容自己主动调整
在MS WORD中,当有大量的表格出现时,调整每一个表格的的高和宽和大小将是一件很累的事情,拖来拖去,很耗时间,并且当WORD文档达到300页以上时,调整反应很的慢,每次拖拉线后,须要等待一段时间其才 ...
- [办公应用]我的WORD文档表格操作不灵活 无法调整列宽
最近同事的一个word文档中的表格操作非常不灵活,用鼠标直接调整列宽时总觉得很不灵活.她的操作系统为XP,office 为微软office 2003. 我首先检查了木马,检查了输入法等,结果都没有问题 ...
- QTableView表格视图的列宽设置
Qt中的表格控件可以通过从QTableView或QTableWidget派生子类实现.其中,QTableWidget只是对QTableView的一种简单封装.因为使用QTableView常常需要用户指 ...
- Java使用POI为Excel打水印,调整列宽并设置Excel只读(用户不可编辑)
本文介绍在Java语言环境下,使用POI为Excel打水印的解决方案,具体的代码编写以及相关的注意事项. 需求描述: 要求通过系统下载的Excel都带上公司的水印,列宽调整为合适的宽度,并且设置为不可 ...
- 完美实现保存和加载easyui datagrid自定义调整列宽位置隐藏属性功能
需求&场景 例表查询是业务系统中使用最多也是最基础功能,但也是调整最平凡,不同的用户对数据的要求也不一样,所以在系统正式使用后,做为开发恨不得坐在业务边上,根据他们的要求进行调整,需要调整最多 ...
- 【Qt开发】QTableWidget设置根据内容调整列宽和行高
QTableWidget要调整表格行宽主要涉及以下一个函数 1.resizeColumnsToContents(); 根据内容调整列宽 ...
- jQuery调整表列(左右拉动调整列宽)插件__colResizable,动态列如何使用
官网地址:http://www.bacubacu.com/colresizable/ 这里值得注意的是,如果是动态加入的列,则需要先清理调用插件生成的class,id和div之后再重新调用才会有作用. ...
- jQuery可调整表和列宽插件-colResizable
最基本的例子 引入JS <script src="js/jquery-1.8.0.min.js" type="text/javascript">&l ...
- CSS 控制table 滑动及调整列宽等问题总结
一. 通过css控制table y方向上滚动 html中没有滚动条,可以根据overflow属性的scroll来对table显示不完全的内容进行滚动. 只是y方向上滚动,很简单,只要设置div的hei ...
随机推荐
- SQLLDR记录数与文本记录数比较
我们平时都用sqlldr进行将文本数据加载到数据库,但是有时候由于数据问题导致入库率不能达到100%,因此我们要检测是否存在不能入库的数据记录.以下shell脚本就是统计文本中记录数和数据库中记录数是 ...
- Android 5.x特性概览三
上节,对Material Design样式做了介绍,这节我们介绍Palette. 在Android发展的长河中,UI越来越成为Google的发展重心.上文提到Android 5.x 使用palette ...
- Chrome以https访问gitlab的问题:Your connection is not private
在Chrome中以https访问自己搭建的gitlab站点时经常出现下面的错误: Attackers might be trying to steal your information from xx ...
- Java经典类库-Guava中的函数式编程讲解
如果我要新建一个java的项目,那么有两个类库是必备的,一个是junit,另一个是Guava.选择junit,因为我喜欢TDD,喜欢自动化测试.而是用Guava,是因为我喜欢简洁的API.Guava提 ...
- Spring 依赖注入控制反转实现,及编码解析(自制容器)
定义: 在运行期,由外部容器动态的将依赖对象动态地注入到组件中. 两种方式: 手工装配 -set方式 -构造器 -注解方式 自动装配(不推荐) 1利用构造器 2set方法注入 dao: package ...
- windows下安装PhpDocumentor(phpdoc)笔记
PhpDocumentor简介 PHPDocumentor是一个用PHP写的工具,对于有规范注释的php程序,它能够快速生成具有相互参照,索引等功能的API文档.老的版本是phpdoc,从1.3.0开 ...
- .NET Framework各版本汇总以及之间的关系
目录(?)[-] 原文链接:http://blog.csdn.net/kingmax54212008/article/details/25886345 NET Framework 版本关系 获取NET ...
- PHP类与面向对象
PHP常量PHP常量大写PHP常量用define函数或const关键字定义一个常量一旦被定义,就不能再改变或者取消定义.在 PHP 5.3.0 以后,可以使用 const 关键字在类定义之外定义常量. ...
- Entity Framework6 with Oracle
Entity Framework6 with Oracle(可实现code first) Oracle 与2个月前刚提供对EF6的支持.以前只支持到EF5.EF6有很多有用的功能 值得升级.这里介绍下 ...
- Android项目实战--手机卫士开发系列教程
<ignore_js_op> banner131010.jpg (71.4 KB, 下载次数: 0) 下载附件 保存到相册 2 分钟前 上传 Android项目实战--手机卫士01- ...