php表格列宽拖拽,JavaScript_JQuery拖动表头边框线调整表格列宽效果代码,类似于桌面程序中的表格拖动 - phpStudy...
JQuery拖动表头边框线调整表格列宽效果代码
类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整。最近比较空闲,便自己动手尝试实现,在此分享下小小的成果。
首先需要如图所示的鼠标图标文件,在自己的硬盘中搜索*.cur,肯定能找到。
为了能在所有需要该效果的页面使用,并且不需要更改页面任何HTML,我把所有的代码整合在 $(document).ready(function() {}); 中,并写入一个独立的JS文件。
用一个1像素宽的DIV来模拟一条竖线,在页面载入后添加到body元素中
$(document).ready(function() {
$("body").append("
});
接下来是鼠标移动到表格纵向边框上鼠标变型的问题,起初我考虑在表头中添加一个很小的块级元素触发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
效果文件下载
————————————————————————更新——————————————
关于拖动时会选中内容的BUG,将以下一行代码添加到$(document).ready函数里就行了
$("body").bind("selectstart", function() { return !lineMove; });相关阅读:
Java中使用数组实现栈数据结构实例
node.js中的fs.lstatSync方法使用说明
Android实现音量调节的方法
ASP.NET Web Api 2实现多文件打包并下载文件的实例
java实现汉字转unicode与汉字转16进制实例
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
HTML5调用手机摄像头拍照的实现思路及代码
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
Android实现三级联动下拉框 下拉列表spinner的实例代码
mysql InnoDB建表时设定初始大小的方法
SQLite教程(四):内置函数
深入理解PHP原理之执行周期分析
Javascript实现单张图片浏览
使用jQuery.form.js/springmvc框架实现文件上传功能
php表格列宽拖拽,JavaScript_JQuery拖动表头边框线调整表格列宽效果代码,类似于桌面程序中的表格拖动 - phpStudy...相关推荐
- elementUI之表格排序失效,表格宽度可拖拽变宽变窄
一.elementUI之表格排序失效 在elementUI官网有介绍到给表格排序的方法 之所以失效是因为我没在<el-table-column>上加上prop='stime' 原本,如果内 ...
- html表格列拖拽,table表格列顺序拖拽和列宽度拖拽
目前项目要求对表格可进行宽度拖拽和排序拖拽.用的第三方库库ant-desigin-vue. 对于列宽度拖拽 在ant-desigin-vue的table示例中有对应的案例,但是直接复制代码,会报错.最 ...
- C# Excel 行高,列宽,合并单元格,单元格边框线,冻结
C# Excel 行高,列宽,合并单元格,单元格边框线,冻结 原文:http://hi.baidu.com/kjkj911/blog/item/0ecc3ec7855dd6d4d100600f.htm ...
- 小程序中使用表格功能
小程序中使用表格 效果展示: 1.wxml代码 <view class="table"><view class="tr bg-w">&l ...
- layui关闭表格编辑_Layui表格table关闭拖拽列宽、禁用拖拽列宽
table 模块是Layui的又一走心之作,在 layui 2.0 的版本中全新推出,是 layui 最核心的组成之一.它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求. ...
- HTML 锁定表格首行首列、拖拽表格列宽
摘自:http://s.yanghao.org/program/viewdetail.php?i=61717 因为与自己的实际情况有些不同,简单的改造了下...如果有版权问题,请留言... 锁定Tab ...
- sortable vue 排序_VUE +element el-table运用sortable 拖拽table排序,实现行排序,列排序...
sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大) 项目需求是要求能对element中 的table进行拖拽行排序 这里用到了sorttable sortable ...
- 实现表格行的拖拽以及分页
虽互不曾谋面,但希望能和您成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 标星公众号(ID:itclanCoder) 背景 在做一 ...
- 可拖拽排序的GridView(高仿今日头条编辑频道效果)
最近在一直在用今日头条,发现在我的频道编辑时的拖拽排序体验非常有意思,这种拖拽功能其实在支付宝等app上也频繁使用,于是打算自己研究一下,网上虽然有很多类似于此类功能的博客,但实现的都不是特别完美,效 ...
最新文章
- python简史_命令行简史
- SK-Learn使用NMF(非负矩阵分解)和LDA(隐含狄利克雷分布)进行话题抽取
- LeetCode 1293. 网格中的最短路径(DP/BFS)
- 关于爬虫数据的解析器设计
- windows 64位sed.exe_32位,64位,x86,x64到底是什么关系?差距居然这么大
- RS-485接口详解
- python自动填写网页数据并提交_python实现问卷星网站的自动填写
- 百度BAE部署java web(Jforum)项目
- python编写年金终值函数_2021年高校邦Python程序设计基础【实境编程】课后习题答案...
- Windows性能监控perfmon工具的使用和性能指标的分析
- 什么是等保?等保流程又具体包含哪些内容呢?
- Linux热潮下,来呆猫云工作站玩转云上部署Linux工作流新思路
- 程序员月入百万的真相!
- 高等数学(第七版)同济大学 习题12-7 个人解答
- AjaxPro2 方法未定义,对象不支持此方法或属性,解决办法
- VMware安装后界面显示为英文
- 公众号被处罚后排名下滑
- webrtc】windows 构建 :depot_tools 采坑
- ubuntu/linux trash-cli 删除文件到回收站 类似回收站机制的删除
- iOS设置键盘上Return按键及点击操作
热门文章
- 如何安全地创建嵌套目录?
- 电脑自动关机什么原因?
- win11正式版如何安装安卓app windows11正式版安装安卓app的步骤方法
- win11如何显示所有应用图标 Windows11显示所有应用图标的设置方法
- 开源 画图_[软件使用05] 快速使用 Deeptools 对 ChIP-seq 数据画图!
- 力扣——在排序数组中查找元素的第一个和最后一个位置
- 快速格式化代码(HTML、CSS)
- ubuntu之解决安装python3.6.4后出现error while loading shared libraries: libpython3.6m.so.1.0的问题
- 代码规范七大原则_设计模式的七大原则详解||上篇
- 企业分布式微服务云SpringCloud SpringBoot mybatis (十二)断路器监控(Hystrix Dashboard)...