JQuery表格拖动调整列宽效果(自己动手写的)_jquery

类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整。最近比较空闲,便自己动手尝试实现,在此分享下小小的成果。

首先需要如图所示的鼠标图标文件,在自己的硬盘中搜索*.cur,肯定能找到。

为了能在所有需要该效果的页面使用,并且不需要更改页面任何HTML,我把所有的代码整合在 $(document).ready(function() {}); 中,并写入一个独立的JS文件。

用一个1像素宽的DIV来模拟一条竖线,在页面载入后添加到body元素中

$(document).ready(function() {
$("body").append("<div id=\"line\" style=\"width:1px;height:200px;border-left:1px solid #00000000; position:absolute;display:none\" ></div> ");
});

接下来是鼠标移动到表格纵向边框上鼠标变型的问题,起初我考虑在表头中添加一个很小的块级元素触发mousemove 和mouseout事件,但为了简单起见,我还是选择为整个表头添加该事件。

在TH的mousemove事件中处理鼠标变型:

$("th").bind("mousemove", function(event) {
var th = $(this);
//不给第一列和最后一列添加效果
if (th.prevAll().length <= 1 || th.nextAll().length < 1) {
return;
}
var left = th.offset().left;
//距离表头边框线左右4像素才触发效果
if (event.clientX - left < 4 || (th.width() - (event.clientX - left)) < 4) {
th.css({ 'cursor': '/web/Page/frameset/images/splith.cur' });
//修改为你的鼠标图标路径
}
else {
th.css({ 'cursor': 'default' });
}
});

当鼠标按下时,显示竖线,并设置它的高度,位置CSS属性,同时记录当前要改变列宽的TH对象,因为一条边框线由两个TH共享,这里总是取前一个TH对象。

$("th").bind("mousedown", function(event) {
var th = $(this);
//与mousemove函数中同样的判断
if (th.prevAll().length < 1 | th.nextAll().length < 1) {
return;
}
var pos = th.offset();
if (event.clientX - pos.left < 4 || (th.width() - (event.clientX - pos.left)) < 4) {
var height = th.parent().parent().height();
var top = pos.top;
$("#line").css({ "height": height, "top": top,"left":event .clientX,"display":"" });
//全局变量,代表当前是否处于调整列宽状态
lineMove = true;
//总是取前一个TH对象
if (event.clientX - pos.left < th.width() / 2) {
currTh = th.prev();
}
else {
currTh = th;
}
}
});

接下来是鼠标移动时,竖线随之移动的效果,因为需要当鼠标离开TH元素也要能有该效果,该效果写在BODY元素的mousemove函数中

$("body").bind("mousemove", function(event) {
if (lineMove == true) {
$("#line").css({ "left": event.clientX }).show();
}
});

最后是鼠标弹起时,最后的调整列宽效果。这里我给BODY 和TH两个元素添加了同样的mouseup代码。我原先以为我只需要给BODY添加mouseup函数,但不明白为什么鼠标在TH中时,事件没有触发,我只好给TH元素也添加了代码。水平有限,下面完全重复的代码不知道怎么抽出来。

$("body").bind("mouseup", function(event) {
if (lineMove == true) {
$("#line").hide();
lineMove = false;
var pos = currTh.offset();
var index = currTh.prevAll().length;
currTh.width(event.clientX - pos.left);
currTh.parent().parent().find("tr").each(function() {
$(this).children().eq(index).width(event.clientX - pos.left);
});
}
});
$("th").bind("mouseup", function(event) {
if (lineMove == true) {
$("#line").hide();
lineMove = false;
var pos = currTh.offset();
var index = currTh.prevAll().length;
currTh.width(event.clientX - pos.left);
currTh.parent().parent().find("tr").each(function() {
$(this).children().eq(index).width(event.clientX - pos.left);
});
}
});

好了,只要在需要这个效果的页面中引入包含以上代码的JS文件,就可以为页面中表格添加该效果。

另外以上代码在火狐中自定义鼠标图标的代码没出效果,所用的jquery为1.2.6

效果文件下载

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索拖动
调整列宽
jquery 拖动列宽插件、jquery 表格拖动列宽、table拖动调整列宽、js拖动调整表格列宽、datatables 拖动列宽,以便于您获取更多的相关知识。

时间: 2024-10-25 05:15:02

JQuery表格拖动调整列宽效果(自己动手写的)_jquery的相关文章

表格拖动调整列宽JQuery代码(1/2)

表格拖动调整列宽jquery代码 为了能在所有需要该效果的页面使用,并且不需要更改页面任何html,我把所有的代码整合在  $(document).ready(function() {});  中,并写入一个独立的js文件. 用一个1像素宽的div来模拟一条竖线,在页面载入后添加到body元素中 $(document).ready(function() {      $("body").append("<div id="line" style=&qu

JQuery拖动表头边框线调整表格列宽效果代码_jquery

类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动手尝试实现,在此分享下小小的成果. 首先需要如图所示的鼠标图标文件,在自己的硬盘中搜索*.cur,肯定能找到. 为了能在所有需要该效果的页面使用,并且不需要更改页面任何HTML,我把所有的代码整合在 $(document).ready(function() {}); 中,并写入一个独立的JS文件.

&amp;#106avascript实现的数据表格:冻结列、调整列宽和客户端排序

客户端|排序|数据|数据表格 根据网上的一些脚本改的,大家看一下,应该对开发有用,准备在.Net下写个Server-Side端控件把下面的代码另存为.htm文件后看下效果. <HTML><HEAD><TITLE>数据表格</TITLE><META http-equiv=Content-Type content="text/html; charset=gb2312"><STYLE type=text/css>BODY

DataGridView怎么调整列宽

DataGridView有一个属性是AutoSizeColumnMode,他有几个枚举值: 1.AllCells 调整列宽,以适合该列中的所有单元格的内容,包括标题单元格. 2.AllCellsExceptHeader 调整列宽,以适合该列中的所有单元格的内容,不包括标题单元格. 3.ColumnHeader 调整列宽,以适合列标题单元格的内容. 4.DisplayedCells 调整列宽,以适合当前屏幕上显示的行的列中的所有单元格的内容,包括标题单元格. 5.DisplayedCellsExc

WPS表格2013固定列宽的方法

  WPS表格2013固定列宽的方法           1.选中单元格,单击菜单栏--开始--行和列--列宽,从弹出的菜单中输入列宽字符. 2.然后切换到审阅标签,单击允许用户编辑按钮,从弹出的菜单中单击新建按钮,引用单元格,选择允许用户编辑的区域. 3.再次单击审阅选项卡下的保护工作表按钮,除了设置列格式外,全部勾选,输入密码. 4.完成后A列除列宽外都可以编辑,其他地方不能编辑.

开放问题-VS动态添加的表格如何改变列宽?

问题描述 VS动态添加的表格如何改变列宽? 我用VS动态添加了一个表格,由于一些列的内容较长,没办法全部看到,我想问下如何拖拉实现改变列宽- 解决方案 js动态添加表格的行与列 解决方案二: 仿Microsoft Excel单元格拖拽修改表格列宽 解决方案三: 我现在也想做个这样的表格,请问你是用的哪种控件

wps表格中怎样调整列宽和行高?

行高设置方法一:选中需要调节行高的整行,右击该行选择"行高",在弹出的行高窗口进行行高设定然后点击确定.       行高设置方法二:将光标移至行号分割线上,上下拖动分割线进行行高调整.     列宽设置方法一:选中需要调节列宽的整列,右击该列选择"列宽",在弹出的列宽窗口进行列宽设定然后点击确定,       列宽设置方法二:将光标移至列号分割线上,左右拖动分割线进行列宽调整.  

jQuery实现拖动调整表格单元格大小的代码实例_jquery

jQuery实现的拖动调整表格td单元格的大小: 在实际应用中,可能有这样的需求,那就是需要调整td单元格的大小. 也许是为了便于观察,也许是其他原因,反正这样的需求是有的,下面就分享一段能够实现此功能的代码. 代码实例如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title></title> <style type

Excel 2007表格中更改列宽和行高的方法

在Excel工作表中,您可以将列宽指定为 0(零)到 255.此值表示可在用标准字体 (标准字体:工作表的默认文本字体.标准字体决定了"常规"单元格样式的默认字体.)进行格式设置的单元格中显示的字符数.默认列宽为 8.43 个字符.如果列宽设置为 0,则隐藏该列. 您可以将行高指定为 0(零)到 409.此值以点数(1 点约等于 1/72 英寸)表示高度测量值.默认行高为 12.75 点.如果行高设置为 0,则隐藏该行. 将列设置为特定宽度 1.选择要更改的列. 2.在"开始