colResizable.js 表格列宽拖拉改变大小 方法

Bootstrap

表格列宽拖拉改变大小方法

使用插件：colResizable.js 

插件地址：http://www.bacubacu.com/colresizable/

特征

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

兼容鼠标和触摸设备（PC，平板电脑和手机）

兼容百分比和基于像素的表格布局

列调整大小而不改变总表宽（可选）

无需外部资源（如图像或样式表）

页面刷新或回发后的可选布局持久性

柱锚的定制

占地面积小

跨浏览器兼容性（IE7 +，Chrome，Safari，Firefox） 

用法

• 要使用此插件，必须在加载jQuery后将脚本引用添加到文档head部分的colResizable.min.js文件中。要增强表（或表的集合），请使用jQuery包装器指向它并应用colResizable（）方法。
• 调整大小的夹点将根据其第一行布局位于表中。因此，建议不要在这些单元格中使用colspan值。如果需要第一行中的colspan，只需在表标题之前添加一个额外的行，没有高度，因此它将不可见。 
• 为了防止在调整列大小时出现奇怪的行为，强烈建议您使用宽度属性，内联样式或css规则来定义表的宽度。 

<script src = "js/jquery.js" />
<script src = "js/colResizable.min.js" />

<script type="text/javascript">
    $(function(){
        $("table").colResizable();
    });
</script>

提供方法

拖动改变列宽大小，不改变表总体父容器宽度

拖动改变列宽大小，刷新页面后，仍然保持拖动后表格列宽大小

拖动改变列宽大小，表格总体父容器宽度将保持不变。拖拉改变表父容器大小，表格列宽将按百分比形式改变列宽度（兼容像素和基于百分比的布局）

拖动改变列宽大小，列单独扩展大小，改变表格总体父容器宽度

拖动改变列宽大小，列单独扩展大小，改变表格总体父容器宽度，溢出时，显示左右拖动条

其他：改变表格外观，范围滑块等

具体细节：请到官网查看

链接：https://www.linghangtech.com/ 领航科技-广州网站建设，深圳网站建设，广州小程序开发，深圳小程序开发，普宁做网站，网站建设，网站开发 本文原创，禁止私自转载，转载请联系本人并保留本文字。