2023年7月9日发(作者：)

jQuery插件来调整表列的⼤⼩拖动改变单元格宽度jQuery插件来调整表列的⼤⼩效果图：

colResizablecolResizable是⼀个免费的jQuery插件，旨在通过⼿动拖动列锚点来增强任何类型的HTML表对象，从⽽增加列重新调整⼤⼩的功能。它兼容⿏标和触摸设备，并具有⼀些不错的功能，如页⾯刷新或回发后的布局持续性以及与百分⽐和基于像素的表格布局的兼容性。它的体积很⼩（colResizable 1.0只有2kb），它与所有主流浏览器（IE7 +，Firefox，Chrome和Opera）完全兼容。⽤法要使⽤此插件，⼀旦jQuery被加载，脚本引⽤必须被添加到⽂档的头部分中的⽂件中。为了增强⼀个表（或表的集合），⽤jQuery包装器指向它并应⽤colResizable（）⽅法。$(function(){

$("table").colResizable();

});属性resizeMode：[type：string] [default：’fit’] [version：1.6] [values：’fit’，’flex’，’overflow’]它⽤于设置resize⽅法的⼯作原理。那些是可能的价值观：‘fit’：这是默认的调整⼤⼩模型，其中调整列的⼤⼩不会改变表宽度，这意味着当列扩展时，下⼀个缩放。

‘flex’：在此模式下，如果⽗容器中有⾜够的空间，表可以更改其宽度，每列可以独⽴缩⼩或扩展。如果没有⾜够的空间，列将会调整其宽度。表不会⽐其⽗母⼤得多。

‘overflow’：允许使⽤⽗容器溢出来调整列的⼤⼩。

disable：[type：boolean] [default：false] [version：1.0]

当设置为true时，它旨在将所有以前添加的增强功能（如事件和此插件分配的其他DOM元素）删除到单个或集合的表中。在使⽤JavaScript从⽂档对象树中删除之前，还需要先将colResized表禁⽤到已经colResized表的任何DOM操作之前，例如添加列，⾏等。disabledColumns：[type：int of int] [default：[]] [version：1.6]

要排除的列索引数组，因此⽆法⼿动拖动。liveDrag：[type：boolean] [default：false] [version：1.0]

当设置为true时，将在拖动列锚点时更新表格布局。启⽤liveDrag的CPU耗费更多，因此不推荐⽤于较慢的计算机，特别是在处理巨⼤或⾮常复杂的表时。postbackSafe：[type：boolean] [default：false] [version：1.3]

此属性可⽤于指定在回发或浏览器刷新后，⼿动选择的列宽度必须保持不变。此功能主要⾯向使⽤服务器端逻辑（codebehind）创建的页⾯，例如PHP或.NET，它仅与具有sessionStorage⽀持的浏览器（所有现代浏览器）兼容。但是，如果您定位较早的浏览器（如IE7和IE8），则仍可以使⽤来模拟sessionStorage。请注意，有些浏览器（IE和FF）在直接从本地⽂件系统运⾏⽹站时不启⽤sessionStorage对象，因此如果要测试此功能，建议您通过Web服务器查看⽹站或使⽤Chrome或Opera等不受此限制的浏览器。不要担⼼兼容性问题，partialRefresh：[type：boolean] [default：false] [version：1.5]

如果表位于updatePanel内部或使⽤ajax进⾏的任何其他类型的部分页⾯刷新，则此属性应设置为true。表的ID在部分部分刷新之前和之后应该相同。innerGripHtml：[type：string] [default：empty string] [version：1.0]

其⽬的是通过定义要在列中使⽤的HTML来提供⼀些视觉反馈来允许列锚定制。它可以以⼴泛的⽅式⽤于获得⾮常不同的输出，并且可以通过将其与draggingClass属性相结合来增加其灵活性。draggingClass：[type：string] [default：internal css class] [version：1.0]

该属性被⽤作被拖动时分配给列锚的css类。它可以⽤于视觉反馈⽬的。minWidth：[type：number] [default：15] [version：1.1]

该值指定列允许的最⼩宽度（以像素为单位）。headerOnly：[type：boolean] [default：false] [version：1.2]

此属性可⽤于防⽌柱锚的垂直展开以适应桌⾯⾼度。如果设置为true，列处理程序的⼤⼩将被绑定到第⼀⾏的垂直⼤⼩。hoverCursor：[type：string] [default：“e-resize”] [version：1.3]

此属性可⽤于⾃定义当⽤户位于列锚上时将显⽰的游标。dragCursor：[type：string] [default：“e-resize”] [version：1.3]

定义⽤户调整列⼤⼩时将使⽤的游标。flush：[type：boolean] [default：false] [version：1.3]

刷新仅在启⽤PostbackSafe时有效。其⽬的是删除与当前表格布局相关的所有以前存储的数据，以恢复其原始布局，防⽌在回发后恢复宽度。marginLeft：[type：string / null] [default：null] [version：1.3]

如果⽬标表包含明确的margin-left CSS规则，则必须在此属性中使⽤相同的值（例如：“auto”，“20％”，“10px”）。需要它的原因是因为⼤多数浏览器（除IE之外的所有浏览器）不允许直接访问应⽤于其原始单元中的元素的当前CSS规则（例如“％”，“em”或“auto”值）。如果您知道任何解决⽅法不涉及通过⽹站和任何其他外部依赖关系中定义的所有样式的迭代，请让我知道！marginRight：[type：string / null] [default：null] [version：1.3]

它的⾏为⽅式与以前的属性完全相同，但应⽤于右边距。fixed：[deprecated：use“mode”改为] [type：boolean] [default：true] [version：1.5 only]

它⽤于设置resize⽅法的⼯作原理。在固定模式下，调整列的⼤⼩不会更改总表宽度，这意味着当列扩展时，下⼀个缩放。如果固定设置为false，则表可以更改其宽度，每列可以独⽴缩⼩或扩展。注意：存在⼀个已知问题，其中CSS属性table-layout: fixed;会导致与调整表宽度相关的轻微冲突。请注意，该fixed设置与CSS属性不同，因此⿎励不要将该样式应⽤于表。如：$("#pendingReview_table").colResizable({ liveDrag: true,//实时显⽰滑动位置 gripInnerHtml: "

", //draggingClass: "dragging", postbackSafe: true,//刷新后保留之前的拖拽宽度 headerOnly:true, //onResize: onSampleResized});