jquery-能拖拽宽度的table
控件官方地址：http://www.bacubacu.com/colresizable/?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation#samples
使用【colResizable】第三方插件
使用方法：
<head>
<script src="js/jquery.js"></script>
<script src="js/colResizable.min.js"></script>
</head>
<body>
<table width="100%" >
<tr> <th> header </th> <th> header </th> </tr>
<tr> <td> cell </td> <td> cell </td> </tr>
<tr> <td> cell </td> <td> cell </td> </tr>
</table>
</body>
<script>
$(function(){
$("table").colResizable();
});
</script>属性或方法：
【模式】resizeMode:[type: string] [default: 'fit'] [version: 1.6] [values: 'fit', 'flex', 'overflow']
【禁止】disable:[type: boolean] [default: false] [version: 1.0]
【禁止的列】disabledColumns:[type: array of int] [default: [ ] ] [version: 1.6]
【激活的拖拽】liveDrag:[type: boolean] [default: false] [version: 1.0]
【是否支持缓存】postbackSafe:[type: boolean] [default: false] [version: 1.3]
（如果是低版本的IE需要加上 sessionStorage.js 才能生效，如：IE7 and IE8）
【局部刷新（ajax）】partialRefresh:[type: boolean] [default: false] [version: 1.5]
【列高与第一行相同】headerOnly:[type: boolean] [default: false] [version: 1.2]
【设置抓钩的html】innerGripHtml:[type: string] [default: empty string] [version: 1.0]
【托转的样式】draggingClass:[type: string] [default: internal css class] [version: 1.0]
【定义最小宽度】minWidth:[type: number] [default: 15] [version: 1.1]
【活动手势】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]
【左margin】marginLeft:[type: string / null] [default: null] [version: 1.3]
【右margin】marginRight:[type: string / null] [default: null] [version: 1.3]
【修正】fixed:[DEPRECATED: use resizeMode instead] [type: boolean] [default: true] [version: 1.5 only]
【==事件==】
【拖动时触发】onResize:[type: callback function] [default: null] [version: 1.0]
【拖动后触发】onDrag:[type: callback function] [default: null] [version: 1.1]
- 上一篇 »html5实现拖拽上传
- 下一篇 »bootstrap-table 列宽动态拖拽改变宽度