$(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. 关于ajax提交表单的一些实例及遇到的问题和解决办法

    ajax提交的表单有两种情况: 第一种:input type类型没有file上传文件类型的表单 第二种:input type类型有file上传文件类型的表单 之所以分为两种:是因为原生ajax是不能提 ...

  2. 教你制作挂件头像 | 小程序七十二变之 canvas 绘制国旗头像

    昨天朋友圈被「请给我一面国旗@微信官方」刷屏,虽然知道是假的,但是从另一个角度来看,弄清楚如何实现更有趣. 1.canvas 这就不得不提到小程序中的 API canvas,H5 中也是有 canva ...

  3. 新建springmvc配置文件

    新建spring或springmvc的配置文件时,需要先加入spring-bean-4.3.18.RELEASE.jar包,当然可以是其他版本,这样就可以在资源目录下,比如resources(Reso ...

  4. React+后端实现导出Excle表格的功能

    最近在做一个基于React+antd前端框架的Excel导出功能,我主要在后端做了处理,根据以下步骤,可以很容易就实现导出Excel表格数据的功能. 在做这类导出文件的功能,其实,在后端进行处理,会更 ...

  5. BZOJ 1965 [AHOI2005]洗牌

    题目描述 为了表彰小联为Samuel星球的探险所做出的贡献,小联被邀请参加Samuel星球近距离载人探险活动. 由于Samuel星球相当遥远,科学家们要在飞船中度过相当长的一段时间,小联提议用扑克牌打 ...

  6. [转] Java 无界阻塞队列 DelayQueue 入门实战

    原文出处:http://cmsblogs.com/ 『chenssy』 DelayQueue是一个支持延时获取元素的无界阻塞队列.里面的元素全部都是"可延期"的元素,列头的元素是最 ...

  7. Springboot2.x + ShardingSphere 实现分库分表

    之前一篇文章中我们讲了基于Mysql8的读写分离(文末有链接),这次来说说分库分表的实现过程. 概念解析 垂直分片 按照业务拆分的方式称为垂直分片,又称为纵向拆分,它的核心理念是专库专用. 在拆分之前 ...

  8. Arouter核心思路和源码详解

    前言 阅读本文之前,建议读者: 对Arouter的使用有一定的了解. 对Apt技术有所了解. Arouter是一款Alibaba出品的优秀的路由框架,本文不对其进行全面的分析,只对其最重要的功能进行源 ...

  9. Three Key Points of Success 成功三要素

    Everyone wants to be successful. Today I would like to share three simple key points of success. Num ...

  10. python日记:用pytorch搭建一个简单的神经网络

    最近在学习pytorch框架,给大家分享一个最最最最基本的用pytorch搭建神经网络并且训练的方法.本人是第一次写这种分享文章,希望对初学pytorch的朋友有所帮助! 一.任务 首先说下我们要搭建 ...