表格可拖拉列改变列大小(使用的时候将youElement全部替换称你要添加这个效果的元素,需是jqery的选择器格式,如:$("table th/td"))
$(function () {
var isMouseDown = false;
var currentTh = null;
youElement.bind({
mousedown: function (e) {
var $th = $(this);
var left = $th.offset().left; //元素距左
var rightPos = left + $th.outerWidth();
if (rightPos - 4 <= e.pageX && e.pageX <= rightPos) {
isMouseDown = true;
currentTh = $th;
youElement.css('cursor', 'ew-resize');
//创建遮罩层,防止mouseup事件被其它元素阻止冒泡,导致mouseup事件无法被body捕获,导致拖动不能停止
var bodyWidth = $('body').width();
var bodyHeight = $('body').height();
$('body').append('<div id="mask" style="opacity:0;top:0px;left:0px;cursor:ew-resize;position:absolute;z-index:9999;width:' + bodyWidth + 'px;height:' + bodyHeight + 'px;"></div>');
}
}
});
$('body').bind({
mousemove: function (e) {
//移动到column右边缘提示
youElement.each(function (index, eleDom) {
var ele = $(eleDom);
var left = ele.offset().left; //元素距左
var rightPos = left + ele.outerWidth();
if (rightPos - 4 <= e.pageX && e.pageX <= rightPos) { //移到列右边缘
ele.css('cursor', 'ew-resize');
} else {
if (!isMouseDown) { //不是鼠标按下的时候取消特殊鼠标样式
ele.css("cursor", "auto");
}
}
});
//改变大小
if (currentTh != null) {
if (isMouseDown) { //鼠标按下了,开始移动
var left = currentTh.offset().left;
var paddingBorderLen = currentTh.outerWidth() - currentTh.width();
currentTh.width((e.pageX - left - paddingBorderLen) + 'px');
var s = currentTh[0];
while(s.tagName!="TABLE"){
s=s.parentNode;
}
for (let i = 0; i <s.rows.length ; i++) {
$(s.rows[i].cells[currentTh[0].cellIndex]).width((e.pageX - left - paddingBorderLen) + 'px');
}
}
}
},
mouseup: function (e) {
isMouseDown = false;
currentTh = null;
youElement.css('cursor', 'auto');
$('#mask').remove();
}
});
});
表格可拖拉列改变列大小(使用的时候将youElement全部替换称你要添加这个效果的元素,需是jqery的选择器格式,如:$("table th/td"))的更多相关文章
- LibreOffice/Calc:在表格中始终显示某列/某行
本文适用于LibreOffice Calc 5.1.6.2 + Ubuntu 16.04,熊猫帮帮主@cnblogs 2018/3/5 编写表格时,我们常常使用表格最左侧的一列和最上方的一行作为序号列 ...
- display:table标签来自动改变列宽 改变的同时table的整体宽度跟随变化
发现公司里的所有分页功能都是通过display:talbe来实现的,但是用户最近说要让表格列宽可以拖动:所有我就寻找了好多的办法:网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是 ...
- PyQt(Python+Qt)学习随笔:QTableWidget表格部件中行高和列宽的计算方式
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QTableWidget表格部件中行高和列宽的计算在Qt提供的资料中内容介绍比较泛,细节说得不清楚, ...
- easyui如何动态改变列的编辑属性
动态改变列的编辑属性 var tt=$('#dg').datagrid('getColumnOption', 'yearContent'); //通过列名获得此列 tt.editor={type:'t ...
- jqGrid使用setColProp方法动态改变列属性
在使用jqGrid插件时,有时我们需要动态改变列的属性,可使用setColProp方法,用法如下 jQuery(”#grid_id”).setColProp('colname',{editoption ...
- devexpress表格控件gridcontrol图片列,按钮列,时间列等特殊列的实现
1.项目中经常会在表格中插入按钮列,图片列,表格列一些非文本的特殊列.如何在devexpress表格控件gridcontrol中实现呢?以下列举一个实现添加图片列,按钮列,时间列,按钮列,开关列的示例 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 动态改变列
jQuery EasyUI 数据网格 - 动态改变列 数据网格(DataGrid)列可以使用 'columns' 属性简单地定义.如果您想动态地改变列,那根本没有问题.为了改变列,您可以重新调用dat ...
- 在mysql中,如何改变列声明.
C 在mysql中,如何改变列声明. 修改表 - 修改列名 使用 CHANGE COLUMN 来修改列的名字,还必须 设置 列的数据类型 mysql> desc test_tab -> / ...
- CSS单行超长溢出如何处理?表格某一行某一列超长如何处理?
表格某一行某一列超长 截取一部分 并增加...效果 增加titile ======================================================== <td t ...
随机推荐
- Aria2 1.35.0,更新,测试,发布
在上一篇: 有哪些便宜还好用的东西,买了就感觉得了宝一样? 结尾提到了Tatsuhiro Tsujikawa的aria2计划在10月更新一个新的版本 今天趁着雨后明月挂天,开始了简单的更新 虽然在半年 ...
- COGS 2096. 不平凡的许愿树
[题目描述] noip要到了,大家来到许愿树前.这个许愿树不仅仅是许愿树,还有未卜先知的功能.众OIer问许愿树:“不平凡的许愿树,CCF告诉我们noip中会有两道题目从Openjudge上选择,你能 ...
- COGS 2095. 不平凡的引线
2095. 不平凡的引线 ★☆ 输入文件:firelead.in 输出文件:firelead.out 简单对比 时间限制:1 s 内存限制:256 MB [题目描述] 这里说的引线是炮 ...
- Spring Boot2 系列教程(十二)@ControllerAdvice 的三种使用场景
严格来说,本文并不算是 Spring Boot 中的知识点,但是很多学过 SpringMVC 的小伙伴,对于 @ControllerAdvice 却并不熟悉,Spring Boot 和 SpringM ...
- CentOS 7.7版本中NAT上网问题
一.NAT(地址转换模式)概念 如果你的网络ip资源紧缺,但是你又希望你的虚拟机能够联网,这时候NAT模式是最好的选择.NAT模式借助虚拟NAT设备和虚拟DHCP服务器,使得虚拟机可以联网. 二.具体 ...
- plSql使用流程
1. 下载PLSQL developer.instantclient_11_2, 下载地址:https://pan.baidu.com/s/1_MjmIT4nUzsQ7Hi8MCrs1A, 备注:此安 ...
- msf假冒令牌
记录下 msf中令牌假冒的过程 环境 kai Linux 靶机 xp meterpreter得到一个返回的shell,test用户,假设无法提升至管理权限. 使用use incognito命令进入该模 ...
- MySQL 插入记录时自动更新时间戳
将字段设置成timestamp类型,同时默认值设置成 CURRENT_TIMESTAMP.
- [专题练习] Part1 搜索
本文中的链接有的是题解有的是题目链接,已经搞混了... 一.DFS(深度优先搜索) 过于水略过. 二.BFS(广度优先搜索) 同上. 三.记忆化 记忆化搜索,就是我们的状态会重复利用,为了防止状态的重 ...
- MySQL常用sql语句-----数据表的查询操作
常用的sql语句如下,应对工作足以 1.查询指定字段 select c_id,c_age,c_name from t_student; select c_id as 编号,c_name as 姓名,c ...