带有jQuery的可调整大小的表列
47 html jquery resize html-table
这是我能找到的唯一一个调整表格列宽度的jQuery插件,但是它与我的表格不能很好地集成,并且有不必要的膨胀(保存在cookie中).是否还有其他插件只用于调整列的大小？(不是数据网格插件,请不要提示那些).
如果没有,我会写自己的,不应该太难,我只是不知道如何检测用户点击td边框(调整大小).有任何想法吗？
Alv*_*eto 109
:-)一旦我发现自己处于相同的情况,没有jQuery插件匹配我的requeriments,所以我花了一些时间开发自己的:colResizable
关于colResizable
colResizable是一个免费的jQuery插件,用于调整表格列,手动拖动它们.它兼容鼠标和触摸设备,并具有一些很好的功能,如页面刷新或回发后的布局持久性.它适用于百分比和基于像素的表格布局.
它的尺寸很小(colResizable 1.0只有2kb),它与所有主流浏览器(IE7 +,Firefox,Chrome和Opera)完全兼容.
特征
colResizable是开发的,因为没有找到具有以下列出的功能的其他类似插件:
- 兼容鼠标和触摸设备(PC,平板电脑和手机)
- 兼容百分比和基于像素的表格布局
- 列调整大小而不改变总表宽(可选)
- 无需外部资源(如图像或样式表)
- 页面刷新或回发后的可选布局持久性
- 柱锚的定制
- 占地面积小
- 跨浏览器兼容性(IE7 +,Chrome,Safari,Firefox)
- 活动
与其他插件比较
colResizable是最优秀的插件列,用于调整表格列的大小.它具有充足的定制可能性,并且还与触摸设备兼容.但是,使colResizable成为最佳选择的最有趣的功能可能是它兼容基于像素和流体百分比表格布局.但是这是什么意思？
如果将表的宽度设置为,假设为90%,并且使用colResizable修改列宽,则在调整浏览器大小时,将按比例调整列宽度.虽然其他插件的行为很奇怪,但colResizable可以正常工作.
colResizable还与表max-width属性兼容:如果所有列的总和超过表的max-width,则会自动修复和更新它们.
与其他插件相比,另一个巨大优势是,如果表位于updatePanel内,它与页面刷新,回发甚至部分回发兼容.它兼容所有主流浏览器(IE7 +,Firefox,Chrome和Opera),而其他插件则因旧IE版本而失败.
代码示例
$("#sample").colResizable({
liveDrag:true
});
- 我试过这个,但它目前不适用于jquery 1.9.1(或最新版本).'TypeError:a.browser未定义' (7认同)
这是一个简短的完整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>
| 归档时间： |
|
| 查看次数： |
113171 次 |
| 最近记录： |