jQuery插件来调整表列的大小colResizable.js 拖动改变单元格宽度

最新推荐文章于 2025-09-14 01:44:37 发布
原创 最新推荐文章于 2025-09-14 01:44:37 发布 · 9.6k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery #jquery插件 #html #table

colResizable是一款免费的jQuery插件，能为HTML表格添加拖动调整列宽的功能。兼容鼠标和触摸设备，支持页面刷新后布局保持及百分比和像素布局。用法简单，只需引入colResizable.min.js文件并应用colResizable()方法。插件还提供了多种配置选项，如resizeMode、disable等，以满足不同需求。

jQuery插件来调整表列的大小

官网地址：http://www.bacubacu.com/colresizable/

github项目地址：https://github.com/ybx13579/resize-table-th

alt text

效果图：
这里写图片描述

colResizable

colResizable是一个免费的jQuery插件，旨在通过手动拖动列锚点来增强任何类型的HTML表对象，从而增加列重新调整大小的功能。它兼容鼠标和触摸设备，并具有一些不错的功能，如页面刷新或回发后的布局持续性以及与百分比和基于像素的表格布局的兼容性。它的体积很小（colResizable 1.0只有2kb），它与所有主流浏览器（IE7 +，Firefox，Chrome和Opera）完全兼容。

用法

要使用此插件，一旦

最低0.47元/天 解锁文章
colResizable.js 全版本 1.0-1.6 table列可拖动宽度插件 有demo
10-31
colResizable.js 全版本 1.0-1.6 table列可拖动宽度插件 有demo
表格宽度拖动 jquery colResizable-1.3.min.js
05-21
表格宽度拖动 jquery 编写，可以实现 table布局的各个方向的拖拽。
BootstrapTable单元格宽度调整：colResizable()方法
Noodles小飞
03-17 4099
BootstrapTable的表格宽度可以通过一些JS插件来手动调整，如下图 bootstrapTable列宽度拖拽自调整需要引入相关的JS包： colResizable-1.6.js、bootstrap-table-resizable.js 然后在页面加载时进行 colResizable() 方法加载 <table id="tb_zdzc" class="table table-hover table-striped table-condensed"></table>
Bootstrap Table 社区精选：10 个优秀第三方扩展插件
最新发布
gitblog_00516的博客
09-14 454
在现代 Web 开发（Web Development）中，数据表格（Data Table）是展示和管理结构化数据的核心组件。Bootstrap Table 作为基于 Bootstrap 的轻量级表格插件，凭借其灵活的配置和丰富的功能，成为前端开发者的首选工具。然而，面对复杂的业务场景（如多条件筛选、实时数据更新、单元格编辑等），原生功能往往难以满足需求。本文精选 10 个社区认可度高、实用性强的第...
jQuery，鼠标可控制列宽的大小（colResizable.js）
吕化冬的博客
09-30 2165
一、关于 首先colResizable是一款轻量级，可调整表格列宽的jQuery插件。大小只有几KB。 二、特征 兼容鼠标和触摸设备（PC，平板电脑和手机） 兼容百分比和基于像素的表格布局 列调整大小而不改变总表宽（可选） 无需外部资源（如图像或样式表） 页面刷新或回发后的可选布局持久性 柱锚的定制 占地面积小 跨浏览器兼容性（IE7 +，Chrome，Safari，Firef...
colResizable.js 表格列宽拖拉改变大小 方法
houhj168的专栏
01-11 2871
Bootstrap 表格列宽拖拉改变大小方法 使用插件：colResizable.js  插件地址：http://www.bacubacu.com/colresizable/ 特征 colResizable的开发，因为没有找到具有以下列出的功能的其他类似插件： 兼容鼠标和触摸设备（PC，平板电脑和手机） 兼容百分比和基于像素的表格布局 列调整大小而不改变总表宽（可选） 无需外部...
colResizable-1.6
09-08
支持table列大小拖动调整大小，非常好用。有详细的帮助和样例。大家只需要引入colResizable.min.js，参看样例即可使用。。
jQuery基于gridster.js可拖动网格布局插件.zip
09-22
总的来说，`jQuery基于gridster.js可拖动网格布局插件.zip`提供了一个强大的工具，帮助开发者快速创建动态、可定制的网格布局。通过学习和利用这个插件，你可以为你的Web应用增加更多互动性和可视化效果，提升用户...
jQuery表格可拖动调整列宽度大小
11-11
总结起来，jQuery表格可拖动调整列宽度大小是一项涉及DOM操作、事件处理、样式修改和可能的动画效果的技术。通过理解和应用这些知识点，开发者可以创建出更用户友好的网页应用，提升用户的交互体验。在实际项目中，...
jQuery实现拖动调整表格单元格大小的代码实例
10-24
在本文中，我们将深入探讨如何使用jQuery实现拖动调整表格（table）单元格（td）大小的功能。这个特性在某些情况下非常实用，比如当用户需要自定义表格布局以适应不同数据展示需求时。以下是一个详细的步骤解析和...
jquery-resizable可调整大小的table表格.zip
11-16
创建可调整大小的列需要付出一些额外的努力，因为表没有一种简单的方法来创建可以移动的拖动句柄。 为了调整列的大小，我们可以在列的右侧添加一个元素来提供句柄，这样我们就有了一个用于拖动的视觉指示器。要调整...
colResizable:jQuery插件来调整表列的大小
05-05
可调整大小 colResizable是一个免费的jQuery插件，旨在通过手动拖动列锚来增强任何类型HTML表对象，从而增加列大小调整功能。 它与鼠标和触摸设备兼容，并具有一些不错的功能，例如页面刷新或回发后的布局持久性以及与百分比和基于像素的表格布局的兼容性。 它的体积很小（colResizable 1.0仅2kb），并且与所有主流浏览器（IE7 +，Firefox，Chrome和Opera）完全兼容。 特征 由于未找到具有以下列出的功能的其他类似插件，因此开发了colResizable： 与鼠标和触摸设备（PC，平板电脑和手机）兼容 与百分比和基于像素的表格布局兼容 调整列大小不会改变表格的总宽度（可选） 不需要外部资源（例如图像或样式表） 页面刷新或回发后的可选布局持久性 定制柱锚 占地面积小 跨浏览器兼容性（IE7 +，Chrome，Safari，Firefox） 大事记
colResizable-1.6 拖动改变表格列宽度 官方下载的最新版本
10-25
拖动改变表格列宽度，状态可维持，F5刷新后，列宽的改变仍会保留。 一行语句就可以使用： $("table").colResizable({postbackSafe:true,partialRefresh:true});
Jquery colResizable 插件 可拖动表格的宽度
10-25
可拖动表格的宽度
利用JQuery修改使表格具有可拖动功能
小灰灰的部落
06-20 515
&lt;%= javascript_include_tag "dragdrop/jquery-1.2.6.min.js", "dragdrop/jquery.tablednd.js" %&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { $("#listProducts tr:even').addCla...
BootStrap-Table可调节列宽（bootstrap-table-resizable.js+(resizableColumns.js或者colResizable-1.6.js)）
ljw1211的博客
09-29 7106
BootStrapTable可调整列宽 BootStrapTable可通过bootstrap-table-resizable.js扩展实现对列的可拖曳调整，需要配合jquery.resizableColumns.min.js或者colResizable-1.6.min.js使用。 bootstrap-table-resizable.js可通过官方网站下载，可在下载的压缩包的 /dist/extensions/ 文件夹下找到，下载地址：https://bootstrap-table.com/docs/ge
jQuery表格的行编辑
天高任鸟飞
06-27 1908
jQuery表格的行编辑 单击单元格，单元格显示为一个控件 然后，在控件中输入或者选择值，失去焦点之后 获取该控件的值，显示在单元格中 控件可以是input、select、datetime等 Input Select2 Datetime // 表格单元格点击事件 $("#assayItemData_tbody").on("click", "td", functio...
jquery 插件--如何通过鼠标拖动改变表格列的宽度
又是再见?
10-21 3817
需要准备：1. jquery 1.6.2版本（高的版本不能支持，不知原因）；                     2. colResizable-1.3.min.js；     *大家可以到我的网盘下载（http://pan.baidu.com/s/1jGGVqqM）； 使用步骤：1. 先引入jquery1.6.2版本，释放1.6.2版本中对$符的控制；
html表格宽度拖拽,jQuery拖拽表格改变列宽
weixin_42396588的博客
06-16 424
$(function() {function isNullOrUndefined(obj) {if (typeof(obj) == "undefined" || obj == null) {return true;}return false;}function registerTableDragEvent() {var dragTH; //记录拖拽的列//第一步按下$('#dragTable th...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值