控件官方地址: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]