jQuery拖动table列宽组件colResizable

表格内容过多比较挤的情况下会有可拖动列的需求
以下是列拖动的组件
可以 兼容dataTable 组件

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

基本使用

// ---------引入cdn----------
// cdn可以去官网下载，上面有链接
<head>
	<script src="js/jquery.js"></script>
	<script src="js/colResizable.min.js"></script>
</head>

// ---------html片段----------
<table id="table">
	<thead>
		<tr>
			<th>表头1</th><th>表头2</th><th>表头3</th>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<td>111</td><td>222</td><td>333</td>
		</tr>
	</tbody>
</table>

// ---------js片段----------
// 注意，选择器选择的一定是table标签
$('#table').colResizable({
    liveDrag:true,
    resizeMode:"overflow",
    partialRefresh:true,
    flush:true,
})

属性解释

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.js来模拟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属性不同，因此鼓励不要将该样式应用于表。

jQuery拖动table列宽组件colResizable

jQuery拖动table列宽组件colResizable

猜你喜欢