使用jQuery调整表格列

这是唯一可以find调整表格列宽度的jQuery插件,但是它不能很好的与我的表格集成,并且有不必要的膨胀(保存在cookie中)。 有没有其他插件只是调整列的大小? (不DataGrid插件,请不要build议这些)。

如果没有,我会写我自己的,它不应该太难,我只是不知道如何检测当用户点击TD边界(resize)。 有任何想法吗?

:-)一旦我发现自己在相同的情况下,没有匹配我的requeiments,所以我花了一些时间开发我自己的一个jQuery插件: colResizable

关于colResizable

colResizable是一个免费的jQuery插件来调整表格列的大小,以手动拖动它们。 它兼容鼠标和触摸设备,并具有一些很好的function,如页面刷新或回发后的布局持久性。 它适用于百分比和基于像素的表格布局。

它的尺寸很小(colResizable 1.0只有2kb),并且与所有主stream浏览器(IE7 +,Firefox,Chrome和Opera)完全兼容。

在这里输入图像说明

特征

colResizable是由于没有其他类似的插件与下列function被发现:

  • 兼容鼠标和触摸设备(PC,平板电脑和手机)
  • 兼容百分比和基于像素的表格布局
  • 调整列大小不改变总表宽度(可选)
  • 不需要外部资源(如图像或样式表)
  • 页面刷新或回发后的可选布局持久性
  • 自定义列锚点
  • 占地面积小
  • 跨浏览器兼容性(IE7 +,Chrome,Safari,Firefox)
  • 活动

与其他插件比较

colResizable是最精致的插件,可以调整表格列的大小。 它有很多定制的可能性,它也与触摸设备兼容。 但是可能使colResizable最大的select最有趣的特点是它与基于像素和stream体百分比表格布局兼容。 但是这是什么意思?

如果表的宽度设置为90%,并且使用colResizable修改列宽,则在调整浏览器大小时,按照比例调整列宽。 虽然其他插件确实有些奇怪,但colResizable的function与预期一致。

colResizable也与table max-width属性兼容:如果所有列的总和超过表的最大宽度,它们将自动修复和更新。

与其他插件相比,另一个很大的优势是,如果表格位于updatePanel内部,它与页面刷新,回发甚至部分回发兼容。 它与所有主stream浏览器(IE7 +,Firefox,Chrome和Opera)兼容,而其他插件则以旧IE版本失败。

看样品和JSFiddle 。

代码示例

 $("#sample").colResizable({ liveDrag:true }); 

所以我开始写自己的,只是裸骨function现在,将在下周工作… http://jsfiddle.net/ydTCZ/

这里有一个简短的完整的html例子。 看演示http://jsfiddle.net/CU585/

 <!DOCTYPE html><html><head><title>resizable columns</title> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script> <style> th {border: 1px solid black;} table{border-collapse: collapse;} .ui-icon, .ui-widget-content .ui-icon {background-image: none;} </style> <body> <table> <tr><th>head 1</th><th>head 2</th></tr><tr><td>a1</td><td>b1</td></tr></table><script> $( "th" ).resizable(); </script></body></html> 

尝试flexigrid ,这里是一个更多的参考

或者试试我的解决scheme: http : //robau.wordpress.com/2011/08/16/unobtrusive-table-column-resize-with-jquery-as-plugin/ 🙂

我试图添加到@ user686605的工作:

1)将光标更改为在第th个边界的col-resize

2)修正resize时突出显示的文字问题

我在两个部分成功。 也许有人更好的CSS可以帮助推动这一进展?

http://jsfiddle.net/telefonica/L2f7F/4/

HTML

 <!--Click on th and drag...--> <table> <thead> <tr> <th><div class="noCrsr">th 1</div></th> <th><div class="noCrsr">th 2</div></th> </tr> </thead> <tbody> <tr> <td>td 1</td> <td>td 2</td> </tr> </tbody> </table> 

JS

 $(function() { var pressed = false; var start = undefined; var startX, startWidth; $("table th").mousedown(function(e) { start = $(this); pressed = true; startX = e.pageX; startWidth = $(this).width(); $(start).addClass("resizing"); $(start).addClass("noSelect"); }); $(document).mousemove(function(e) { if(pressed) { $(start).width(startWidth+(e.pageX-startX)); } }); $(document).mouseup(function() { if(pressed) { $(start).removeClass("resizing"); $(start).removeClass("noSelect"); pressed = false; } }); }); 

CSS

 table { border-width: 1px; border-style: solid; border-color: black; border-collapse: collapse; } table td { border-width: 1px; border-style: solid; border-color: black; } table th { border: 1px; border-style: solid; border-color: black; background-color: green; cursor: col-resize; } table th.resizing { cursor: col-resize; } .noCrsr { cursor: default; margin-right: +5px; } .noSelect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 

虽然很晚,希望它仍然有助于某人:

这里和其他post中的许多评论都关心设置初始大小。

我用jqueryUi.Resizable 。 初始宽度应在第一行(<TR>)的每个“<td>”标签内定义。 这与colResizablebuild议的不同。 colResizable禁止在第一行定义宽度,在那里我不得不定义宽度在“<col>”标签,而不是与jqueryresizable的consikstent。

下面的代码片段非常整洁,比平时更容易阅读:

 $("#Content td").resizable({ handles: "e, s", resize: function (event, ui) { var sizerID = "#" + $(event.target).attr("id"); $(sizerID).width(ui.size.width); } }); 

内容是我的表的ID。 手柄(e,s)定义了插件可以改变大小的方向。 你必须有一个链接到jquery-ui的CSS,否则它将无法正常工作。

我已经做了我自己的jQuery UI部件,只是想它是否足够好。

https://github.com/OnekO/colresizable