$(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"))的更多相关文章

  1. LibreOffice/Calc:在表格中始终显示某列/某行

    本文适用于LibreOffice Calc 5.1.6.2 + Ubuntu 16.04,熊猫帮帮主@cnblogs 2018/3/5 编写表格时,我们常常使用表格最左侧的一列和最上方的一行作为序号列 ...

  2. display:table标签来自动改变列宽 改变的同时table的整体宽度跟随变化

    发现公司里的所有分页功能都是通过display:talbe来实现的,但是用户最近说要让表格列宽可以拖动:所有我就寻找了好多的办法:网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是 ...

  3. PyQt(Python+Qt)学习随笔:QTableWidget表格部件中行高和列宽的计算方式

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QTableWidget表格部件中行高和列宽的计算在Qt提供的资料中内容介绍比较泛,细节说得不清楚, ...

  4. easyui如何动态改变列的编辑属性

    动态改变列的编辑属性 var tt=$('#dg').datagrid('getColumnOption', 'yearContent'); //通过列名获得此列 tt.editor={type:'t ...

  5. jqGrid使用setColProp方法动态改变列属性

    在使用jqGrid插件时,有时我们需要动态改变列的属性,可使用setColProp方法,用法如下 jQuery(”#grid_id”).setColProp('colname',{editoption ...

  6. devexpress表格控件gridcontrol图片列,按钮列,时间列等特殊列的实现

    1.项目中经常会在表格中插入按钮列,图片列,表格列一些非文本的特殊列.如何在devexpress表格控件gridcontrol中实现呢?以下列举一个实现添加图片列,按钮列,时间列,按钮列,开关列的示例 ...

  7. 雷林鹏分享:jQuery EasyUI 数据网格 - 动态改变列

    jQuery EasyUI 数据网格 - 动态改变列 数据网格(DataGrid)列可以使用 'columns' 属性简单地定义.如果您想动态地改变列,那根本没有问题.为了改变列,您可以重新调用dat ...

  8. 在mysql中,如何改变列声明.

    C 在mysql中,如何改变列声明. 修改表 - 修改列名 使用 CHANGE COLUMN 来修改列的名字,还必须 设置 列的数据类型 mysql> desc test_tab -> / ...

  9. CSS单行超长溢出如何处理?表格某一行某一列超长如何处理?

    表格某一行某一列超长 截取一部分 并增加...效果 增加titile ======================================================== <td t ...

随机推荐

  1. Redis info 说明

    背景 前面几篇文章介绍完了Redis相关的一些说明,现在看看如何查看Redis的一些性能指标和统计信息,也可以看官网说明. INFO [section] INFO命令返回有关服务器的信息和统计信息,带 ...

  2. 从输入URL到页面渲染完成 -戈多编程

    1.输入URL地址 2.浏览器根据域名查询IP地址 3.浏览器发送HTTP请求到web服务器 4.服务器返回一个永久重定向响应 5.浏览器会跟踪重定向地址 6.服务器处理请求 7.服务器返回一个HTM ...

  3. 【JZOJ4807】破解

    Description 历经千辛万苦,ddddddpppppp 终于找到了IBN5100. dp 事先了解到SERN 共有T 个密码,每个密码是一个长度为N 的01 串,他要利用IBN5100 的特殊 ...

  4. bugku细心地大象

    解压得到图片,查看属性,发现一段编码. 用winhex打开图片,发现头文件是错的,正常jpg文件头文件为FF D8 FF E0 说明不是图片,是zip的文件头,更换格式. 丢到kali用binwalk ...

  5. 第一天 hello world 启程

    #include<stdio.h> int main() { printf(" Hello world"); return 0; }

  6. Python_散点图绘制

    为了可视化一些数据分布,需要以散点图的形式呈现 引入绘图工具 import matplotlib.pyplot as plt from matplotlib.font_manager import F ...

  7. 记个mimikatz小坑

    今晚回学校无聊搞搞自己school  实战的时候遇到mimikatz抓密码报错  以前没遇过 记一下(水一篇) 爆ERROR kuhl_m_privilege_simple ; RtlAdjustPr ...

  8. 控制反转和依赖注入(对IOC,DI理解+案例)

    理解 控制反转说的官方一点就是面向对象编程中的一种设计原则,可以用来减低计算机代码之间的耦合度.其实就是一种设计思想,大概思想就是把设计好的对象交给容器控制,而不是在你内部直接控制. 依赖注入是控制反 ...

  9. go-接口-反射

    接口类型总是代表着某一种类型(即所有实现它的类型)的行为. 一个接口类型的声明通常会包含关键字type.类型名称.关键字interface以及由花括号包裹的若干方法声明. type Animal in ...

  10. ElasticSearch Bulk API

    做一个简单的记录,以便自己后续查找 一.环境要求 ElasticSearch 7.3.0 Kibana 7.3.0 二.详情 ElasticSearch 的 Bulk API 可以批量进行索引或者删除 ...