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 ...
随机推荐
- SQLSERVER迁移工具 SSMA5.3发布
SQLSERVER迁移工具 SSMA5.3发布 官方论坛/博客: SQL Server Migration Assistant (SSMA) Team's Blog Welcome to SQL Se ...
- Xamarin开发Android笔记:TextView行间距设定
TextView 在使用TextView的时候会遇到调整行间距的问题,可通过Layout文件添加属性完成,具体属性如下: //设置行间距,如”3dp”. android:lineSpacingExtr ...
- 微软BI 之SSIS 系列 - 再谈Lookup 缓存
开篇介绍 关于 Lookup 的缓存其实在之前的一篇文章中已经提到了 微软BI 之SSIS 系列 - Lookup 组件的使用与它的几种缓存模式 - Full Cache, Partial Cache ...
- ASP.NET MVC中三方登录: 微软、谷歌、Office365
创建一个MVC的工程,在Startup.Auth.cs文件中,我们能看到这样的一些代码: 这其实是微软已经帮我们实现好的三方登录的接口,我们只需要创建相应的开发者账号,并在其中配置好跟我们应用程序相关 ...
- SQL范式小结
说明:大多数初学者对于关系数据库中的范式很是头疼,我本人也是,所以今天又看了视频,总结了一下内容,尽量语言通俗易懂,少用专业术语以及概念. 首先要理解几个键值. 超键:在关系模式中,能唯一标识元组的属 ...
- 基本hibernate DEMO
Hibernate常用API: 1Configuration: 负责加载主配置文件信息,同时也加载映射关系文件信息. 2SessionFactory 负责创建Session对象. 3Session 数 ...
- atitit.ajax bp dwr 3.的注解方式配置使用流程总结 VO9o.....
atitit.ajax bp dwr 3.的注解方式配置使用流程总结 VO9o..... 1. 安装配置 1 1.1. 下载 dwr.jar 1M 1 1.2. 配置注解方式..web.xml 1 ...
- atitit。 hb Hibernate sql 查询使用
atitit. hb Hibernate sql 查询使用 #----------返回list<map>法..这个推荐使用. q.setResultTransformer(Tr ...
- paip.web数据绑定 下拉框的api设计 选择框 uapi python .net java swing jsf总结
paip.web数据绑定 下拉框的api设计 选择框 uapi python .net java swing jsf总结 ====总结: 数据绑定下拉框,Uapi 1.最好的是默认绑定..Map(k ...
- 定义一个时钟类——Clock,它包括三个int型 成员变量分别表示时、分、秒,一个构造方法用于对三个成员变量(时、分、秒) 进行初始化,还有一个成员方法show()用于显示时钟对象的时间。其次,再定义 一个主类——TestClass,在主类的main方法中创建多个时钟类的对象,使用这 些对象调用方法show()来显示时钟的时间
package java1; public class Clock { int hhh; int mmm; int sss; Clock(int h,int m,int s) { hhh=h; mmm ...