JQuery 表格拖动调整列宽效果
类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整。最近比较空闲,便自己动手尝试实现,在此分享下小小的成果。
首先需要如图所示的鼠标图标文件,在自己的硬盘中搜索*.cur,肯定能找到。
为了能在所有需要该效果的页面使用,并且不需要更改页面任何HTML,我把所有的代码整合在 $(document).ready(function() {}); 中,并写入一个独立的JS文件。
用一个1像素宽的DIV来模拟一条竖线,在页面载入后添加到body元素中
1
2
3
|
$(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事件中处理鼠标变型:
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 <= 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对象。
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 < 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函数中
1
2
3
4
5
|
$( "body" ).bind( "mousemove" , function (event) {
if (lineMove == true ) {
$( "#line" ).css({ "left" : event.clientX }).show();
}
});
|
最后是鼠标弹起时,最后的调整列宽效果。这里我给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 = 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
效果文件下载:http://files.cnblogs.com/xxfss2/changeTh.js
————————————————————————更新——————————————
关于拖动时会选中内容的BUG,将以下一行代码添加到$(document).ready函数里就行了
$("body").bind("selectstart", function() { return !lineMove; });
转载于:https://www.cnblogs.com/ranzige/p/3938751.html
JQuery 表格拖动调整列宽效果相关推荐
- php表格列宽拖拽,JavaScript_JQuery拖动表头边框线调整表格列宽效果代码,类似于桌面程序中的表格拖动 - phpStudy...
JQuery拖动表头边框线调整表格列宽效果代码 类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放 ...
- 计算机考试行高怎么设置,2017年职称计算机考试WPS教程:表格行高列宽的调整...
2017年职称计算机考试WPS教程:表格行高列宽的调整 导语:在WPS教程中的表格行高列宽的调整是怎样的呢?下面我么一起来看看相关的具体操作是怎样的吧.更多相关内容请上应届毕业生考试网查询. 表格行高 ...
- HTML列宽调整,调整表格中的列宽(CSS/HTML)
我一直试图让移动上的列宽变为50%,但是我尝试过的所有内容都没有奏效.这是CSS.调整表格中的列宽(CSS/HTML) @media (max-width: 768px) { #customTable ...
- LabVIEW 调整Table表格行高列宽的方法与例程
LabVIEW 调整Table表格行高列宽的方法与例程 在 VI 运行时,可以用两种不同的方式更改表中的列宽度.首先,可以用鼠标更改它们:其次,可以通过属性节点编程更改它们. 手部更列表的宽度 只有在 ...
- QTableView表格视图的列宽设置
QTableView表格视图的列宽设置 Qt中的表格控件可以通过从QTableView或QTableWidget派生子类实现.其中,QTableWidget只是对QTableView的一种简单封装.因 ...
- CSDN的MarkDown调整列宽技巧
文章目录 bingo 鸣谢 问题 解决办法 解决方法一 解决方法二(推荐) bingo 相信你也是因为CSDN中MarkDown无法指定列宽而苦恼,也被自动调整宽度的排版丑怕了,那么本文用一种相对巧妙 ...
- 【Qt开发】QTableWidget设置根据内容调整列宽和行高
QTableWidget要调整表格行宽主要涉及以下一个函数 1.resizeColumnsToContents(); 根据内容调整列宽 ...
- Java使用POI为Excel打水印,调整列宽并设置Excel只读
武林游戏 2017-05-02 11:15 本文介绍在Java语言环境下,使用POI为Excel打水印的解决方案,具体的代码编写以及相关的注意事项. 需求描述: 要求通过系统下载的Excel都带上公司 ...
- DataGridView调整列宽
1)DataGridView有一个属性是AutoSizeColumnMode,他有几个枚举值: AllCells 调整列宽,以适合该列中的所有单元格的内容,包括标题单元格. AllCellsExcep ...
- EasyExcel表格导出自动列宽设定
EasyExcel表格导出自动列宽设定 public static class AutoColumnWidthStrategy implements CellWriteHandler {@Overri ...
最新文章
- ICLR2018论文投稿抢先看:Ian Goodfellow由衷赞赏的训练稳定方法SN-GANs
- python的算术运算符不包括_没有算术运算符的A + B,Python与C ++
- 那些做了多少次错了多少次的题目
- linux 终端 含义,ubuntu终端中@前后的字符串含义及修改-布布扣-bubuko.com
- 【待继续研究】除了专家模型,这两大模型也被普遍应用于信用评估
- 逆向入门--何为OEP
- ×××常见问题原因与解决
- Redis有哪几种数据淘汰策略?
- vector中resize()和reserve()区别
- mysql使用GROUP BY分组实现取前N条记录的方法或最近几条消费记录
- ospf-3型和5型汇总
- 金字塔 2020-12-29
- 同时安装vs2005团队开发版和sql 2005企业版
- HTMLCSS字体之引入外部字体
- 基于ROS的AGV运动控制与状态记录(维嵌科技)
- pip安装pytorch清华_镜像安装pytorch的简便方法总结
- linux oel7没有网络,OEL7.2下Oracle11.2.0.4RAC部署
- 桌面软件图标变白怎么解决
- Win7开机加速全攻略四:系统服务优化
- 【VRP】基于matlab遗传算法求解多中心车辆路径规划问题【含Matlab源码 1965期】
热门文章
- eclipse 4.3 汉化
- Hibernate错误处理:Unable to get the default Bean Va...
- 第3章 排列清单控制标记
- 3-6 读写二进制文件
- asp fso的神奇功能
- 总结一下SQL语句中引号(')、quotedstr()、('')、format()在SQL语句中的用法
- 蓝桥杯dfs搜索专题
- nova创建虚拟机源码分析系列之六 api入口create方法
- u-boot-2010.09移植(A)
- Unity NGUI 网络斗地主 -界面制作