可调整表格列与jQuery

前端之家收集整理的这篇文章主要介绍了可调整表格列与jQuery前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
This是唯一的jQuery插件,我可以找到调整表列宽,但它不能很好地与我的表集成,并有不必要的膨胀(保存在cookie)。有没有任何其他插件只是调整列大小? (不是datagrid插件,请不要建议那些)。

如果没有,我会写我自己的,它不应该太难,我只是不知道如何检测时,用户点击td边框(调整大小)。有任何想法吗?

解决方法

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

关于colResizable

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

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

特征

colResizable是开发的,因为没有找到具有以下列出的功能的其他类似的插件

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

与其他插件比较

colResizable是最漂亮的插件来调整表列的大小。它有大量的定制可能性,它也与触摸设备兼容。但可能最有趣的特性是使colResizable最大的选择是它与基于像素和流体百分比表格布局兼容。但是,这是什么意思?

如果表的宽度设置为,让我们说90%,并且列宽使用colResizable修改,当浏览器调整大小时,列宽将按比例调整大小。虽然其他插件行为奇怪,colResizable执行其工作,正如预期。

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

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

参见samplesJSFiddle

代码示例

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

猜你在找的jQuery相关文章