BootstrapTable单元格宽度调整：colResizable()方法

BootstrapTable的表格宽度可以通过一些JS插件来手动调整，如下图

bootstrapTable列宽度拖拽自调整需要引入相关的JS包：
colResizable-1.6.js、bootstrap-table-resizable.js
然后在页面加载时进行 colResizable() 方法加载

<table id="tb_zdzc" class="table table-hover table-striped table-condensed"></table>$(function() {$("#tb_zdzc").colResizable({liveDrag : true,gripInnerHtml : "<div class='grip'></div>",draggingClass : "dragging",resizeMode : 'fit'});
}

情景描述：当一个页面放两个BootstrapTable表格时，初始加载时表格tb_zdzc显示，tb_zctzjnsc表格隐藏；点击对应按钮时显示表格tb_zctzjnsc，隐藏表格tb_zdzc

<table id="tb_zdzc" class="table table-hover table-striped table-condensed"></table><table id="tb_zctzjnsc" class="table table-hover table-striped table-condensed"></table>

在这个过程中遇到一个问题：显示tb_zdzc表格时，表格宽度可以手动拖拽调整，但当显示tb_zctzjnsc表格时，该表格不能手动拖拽。
反复检查测验后发现原因：初始加载时调用方法
$(’#tb_zdzc’).show()
$(’#tb_zctzjnsc’).hide()
因为hide()方法导致 tb_zctzjnsc表格的colResizable() 方法失效，需要在 $(’#tb_zctzjnsc’).show()方法中重新绑定colResizable()

      $('#tb_zctzjnsc').show(50,function(){$("#tb_zctzjnsc").colResizable({liveDrag : true,gripInnerHtml : "<div class='grip'></div>",draggingClass : "dragging",resizeMode : 'fit'}); })

BootstrapTable单元格宽度调整：colResizable()方法相关推荐

计算机设置单元格行高,word表格调整（行高、列宽、单元格宽度）方法技巧-行距怎么设置...
在word中使用表格经常需要针对性调整其行高与列宽,有时侯也需要对某个单元格单独调整宽度(需要注意的是:单元格不能单独调整高度.针对整个表格只有宽度调整.表格高度是通过对每一行的高度来调整.) 表格大 ...
html table拓宽,excel拉长单元格_excel调整单元格大小的方法步骤详解
excel在单元格中要输入的数据太多了,二单元格的位置又太小了,怎么办,excel单元格的大小改怎么调,那就有阿呼告诉你两个可靠的方法吧.希望对你有帮助! excel调整单元格大小的方法一 1.打开一 ...
如何在浏览器中增加Jupyter / ipython笔记本的单元格宽度？
本文翻译自:How do I increase the cell width of the Jupyter/ipython notebook in my browser? I would like t ...
poi设置word表格单元格宽度_xwpftable设置宽度；POI操作Word设置表格宽度
poi 操作word里表格,如设置表格宽度.行高.表格样式等. 1.表格或单元格宽度: 默认TblW的type属性为STTblWidth.AUTO,即自动伸缩.所以要调整为指定类型:STTblWidt ...
poi设置word表格单元格宽度_poi,word,表格样式
第 1 页共 17 页竭诚为您提供优质文档 / 双击可除 poi,word, 表格样式篇一: poi 操作 wrod 技巧 1. 表格或单元格宽度: 默认 tblw 的 type 属性为 stt ...
删除单元格_VBA（实验1）用VBA 删除某列空单元格的3种方法：删除法，转移到其他列方法，数组方法...
1 要解决的问题:删除某列中的空单元格/空行暂时只实现了删除一列中的空行,并没有实现多行的判断空行和删除方法.----之后再做更复杂的 1.1 需求分析用VBA删除如下内容,解决思路都不同删除1 ...
html多个单元格合并单元格内容,excel怎样快速把多个单元格内容合并合并多个单元格内容的设置方法...
excel是我们常用的办公软件,有时我们需要把多个单元个的内容合并到一个单元格里,那么excel怎样快速把多个单元格内容合并?下面小编带来合并多个单元格内容的设置方法,希望对大家有所帮助. 合并多个单 ...
PHP套入表格公式,单元格公式引用的方法
单元格公式引用的方法 EXCEL公式中引用单元格方式所有引用都可以直接输入,只是有些麻烦,可以直接点击引用单元格来产生引用单元格地址,同工作表的引用,点击相应的单元格,如:=A1+B1,先点击A1单 ...
html如何取单元格内容,JS获取表格内指定单元格html内容的方法
JS获取表格内指定单元格html内容的方法本文实例讲述了JS获取表格内指定单元格html内容的方法.分享给大家供大家参考.具体如下: 下面的代码先通过表格对象的rows获得指定的行的所有单元格数组, ...

BootstrapTable单元格宽度调整：colResizable()方法

BootstrapTable单元格宽度调整：colResizable()方法相关推荐

最新文章

热门文章