表格可拖拉列改变列大小(使用的时候将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 ...
随机推荐
- MRP进程起不来, 报错:ORA-00600: internal error code, arguments: [2619], [227424], [], [], [], [], [], [], [], [], [], []
问题背景:客户数据库服务架构为一主一备,某日备库操作系统意外重启,重启后Oracle MRP进程起不来,报错:ORA-00600: internal error code, arguments: [2 ...
- 常用的js代码片段
1.单选框/手风琴 <script> $(document).ready(function(){ $("dd").on("click",functi ...
- Spring Boot2 系列教程(十一)Spring Boot 中的静态资源配置
当我们使用 SpringMVC 框架时,静态资源会被拦截,需要添加额外配置,之前老有小伙伴在微信上问松哥 Spring Boot 中的静态资源加载问题:"松哥,我的 HTML 页面好像没有样 ...
- mysql的十二条基本语句
在 mysql里,所有语句都以分号作为结束标志! 1.连接服务器 Mysql -u username -p passwd 2.当连上服务器后,首先面对的是库,库有1个或多个,因此我们想对表进行操作的话 ...
- Kubernetes集群的部署方式及详细步骤
一.部署环境架构以及方式 第一种部署方式 1.针对于master节点 将API Server.etcd.controller-manager.scheduler各组件进行yum install.编译安 ...
- 禅道部署(基于Linux)
部署步骤: 1. 查看Linux服务器是32位还是64位的 #getconf LONG_BIT 2. 禅道开源版安装包下载 下载站点1:#wget http://sourceforge.net/ ...
- js判断是否为空和typeof的用法
(1)typeof作用用于查看数据类型 (2)typeof用法typeof 返回值类型有number, string, boolean, function, undefined, objectPS:在 ...
- shark恒破解笔记2-绕过自校验
这集讲的是绕过自校验 主要是通过文件大小的自校验 首先查壳 有壳 可以用esp定律搞定 OD载入 右键od脱裤壳调试进程 可以看到一些信息 包括入口点252F0 修正后地址为252F0 loadP ...
- Ubuntu16.04搭建boost环境
下载地址:http://sourceforge.net/projects/boost/files/boost/1.58.0/boost_1_58_0.tar.bz2/download 编译前所需的库 ...
- 安装并使用SourceTree进行代码管理(Mac环境)
应用场景 对于我们开发人员来说,熟练使用Git是最基本的技能之一.SourceTree又是一款比较好的Git UI工具,是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端,主要 ...