表格可拖拉列改变列大小(使用的时候将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 ...
随机推荐
- 两台CentOS6.5 在不同机器上互联
准备工作 1.安装vmware及虚拟机centos6.5: 2.将安装好的centos6.5复制一份,在另一台机器上拷贝. 要进行不同机器上虚拟机的互相通信,需要用桥接模式进行互联.如下图,对vmwa ...
- atomic_inc(&v)原子操作简述
atomic_inc(&v)对变量v用锁定总线的单指令进行不可分解的"原子"级增量操作,避免v的值由于中断或多处理器同时操作造成不确定状态. 原子操作 所谓原子操作,就是该 ...
- .bash_profile does not exist
localhost:test jerry$ open .bash_profile The file /Users/je/Desktop/test/.bash_profile does not exis ...
- Zabbix安装与简单配置
目录 0. 前言 1. 安装 1.1 准备安装环境 1.1.1 下载安装包 1.1.2 修改文件配置 1.2 开始安装 2. 实验环境 2.1 简易拓扑图 2.2 基本配置 3. 配置 0. 前言 不 ...
- java架构之路-(Redis专题)Redis的高性能和持久化
上次我们简单的说了一下我们的redis的安装和使用,这次我们来说说redis为什么那么快和持久化数据 在我们现有的redis中(5.0.*之前的版本),Redis都是单线程的,那么单线程的Redis为 ...
- DRF框架学习总结
DRF框架安装配置及其功能概述 Django与DRF 源码视图解析 DRF框架序列化和返序列化 DRF框架serializers中ModelSerializer类简化序列化和反序列化操作 DRF源码s ...
- postman动态数据获取
1.以获取token(JWT)和uid为例 2.在登录接口的tests中写入代码(因为登录接口报文信息中有返回JWT和uid) 3.在其他接口中需要用到JWT和uid的地方设置变量{{JWT}}和{{ ...
- Win10安装虚拟机 + Ubuntu
近期需要利用虚拟机,同时在虚拟机中安装Ubuntu系统.整理安装过程,供今后学习参考. 虚拟机安装包:VMware-workstation-full-12.1.0 链接:https://pan.bai ...
- 如何用js做关灯游戏
编辑器 Sublime Text 3 <!DOCTYPE html><html lang="en"><head> <meta chars ...
- 关于参加AWD攻防比赛心得体会
今天只是简单写下心得和体会 平时工作很忙 留给学习的时间更加珍少宝贵. 重点说下第二天的攻防比赛吧 . 三波web题 .涉及jsp,php,py. 前期我们打的很猛.第一波jsp的题看到有首页预留后 ...