1. colResizable 简介

colResizable 是一个免费的 jQuery 插件，旨在通过手动拖动列锚点来增强任何类型的 HTML 表格，从而实现列的调整大小功能。该插件支持鼠标和触摸设备，且具有以下特点：

  • 支持页面刷新或回发后的布局持续性。
  • 兼容百分比和基于像素的表格布局。
  • 体积小巧（colResizable 1.0 仅有 2 KB）。
  • 完全兼容主流浏览器（IE7+、Firefox、Chrome、Opera）。

2. colResizable 下载

  • 官网地址：colResizable 官网
  • 下载后，你可以将插件文件直接引入到项目中。

3. colResizable 使用

在项目中，你可以通过 <script> 标签直接引入插件。确保在引入插件之前，已经加载了 jQuery 和 Bootstrap（如果使用）。

示例代码

(function ($) {
    $(document).ready(function () {
        $("#testTable").colResizable({ // 为你要进行拖拽的表格
            colReorder: true // 启用拖拽功能
        });
    });
})(jQuery);

通过上述代码，你可以为表格添加列拖拽功能。插件会自动识别鼠标，表头会显示拖拽的图标，鼠标拖拽即可调整列宽。

4. 配置项

colResizable 提供了多个配置项，用于自定义插件的行为和外观。下面是配置项的详细表格：

配置项 类型 默认值 说明
resizeMode string 'fit' 设置调整大小模式。可能的值：'fit'（默认）、'flex'、'overflow'。
disable boolean false 设置为 true 时，禁用所有之前添加的增强功能。
disabledColumns array of int [] 指定不能进行拖拽的列索引。
liveDrag boolean false 启用时，拖拽时实时更新表格布局。启用此选项可能会增加 CPU 使用量。
postbackSafe boolean false 启用时，表格在回发或浏览器刷新后会保持列宽设置。
partialRefresh boolean false 设置为 true 时，支持部分页面刷新。
HEADERONLY boolean false 设置为 true 时，列锚点的大小仅限于表头的高度。
innerGripHtml string "" 自定义列锚点的 HTML 内容，用于提供视觉反馈。
draggingClass string "" 设置拖动时分配给列锚点的 CSS 类。
minWidth number 15 设置列允许的最小宽度（单位：像素）。
hoverCursor string "e-resize" 自定义鼠标悬停在列锚点时显示的光标。
dragCursor string "e-resize" 自定义拖动列时显示的光标。
marginLeft string / null null 如果表格包含 margin-left 样式，设置相同的值。
marginRight string / null null 如果表格包含 margin-right 样式，设置相同的值。
fixed boolean true （已弃用）设置为 true 时，调整列大小不会改变表格宽度。

5. 注意事项

  • 当使用 table-layout: fixed 时，可能会与调整列宽的功能产生轻微冲突，建议避免使用。
  • 使用 postbackSafe 时，确保浏览器支持 sessionStorage（所有现代浏览器均支持），否则需要使用模拟器如 sessionStorage.js。
  • 对于部分页面刷新（如通过 AJAX 或 updatePanel），需要设置 partialRefresh: true。

6. 更多配置项与说明

插件提供了丰富的配置项和自定义选项，可以根据需要进一步调整表格的列调整行为。详情请参考插件的官方文档。