bootstrap中使用jquery表格插件列宽拖动问题 200

使用jquery的插件实现表格列宽拖动长度,用到了bootstrap的切换卡功能,当前页面的(one页面)表格可以拖动,切换到two页面就没办法拖动了,求大神解决办法<h... 使用jquery的插件实现表格列宽拖动长度,用到了bootstrap的切换卡功能,当前页面的(one页面)表格可以拖动,切换到two页面就没办法拖动了,求大神解决办法<head> <title>part</title> <meta name="description" content=""> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <link rel="stylesheet" href="http://demo.sc.chinaz.com/files/download/webjs1/201306/jiaoben1035/libs/bootstrap.css"> <link rel="stylesheet" href="http://demo.sc.chinaz.com/files/download/webjs1/201306/jiaoben1035/libs/bootstrap-responsive.css"> <link rel="stylesheet" href="http://demo.sc.chinaz.com/files/download/webjs1/201306/jiaoben1035/css/jquery.resizableColumns.css"> <link rel="stylesheet" href="http://demo.sc.chinaz.com/files/download/webjs1/201306/jiaoben1035/css/demo.css"> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="https://cdn.bootcss.com/store.js/1.3.20/store.js"></script> <script src="http://dobtco.github.io/jquery-resizable-columns/dist/jquery.resizableColumns.min.js"></script> <script> $(function(){ $("table").resizableColumns({ store: store }); }); </script></head> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <div class="tabbable" id="tabs-575102"> <ul class="nav nav-tabs"> <li class="active"> <a href="#panel-76425" data-toggle="tab">one</a> </li> <li> <a href="#panel-940157" data-toggle="tab">two</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="panel-76425"> <table class="table table-bordered" data-resizable-columns-id="demo-table"> <thead> <tr> <th data-resizable-column-id="#">#</th> <th data-resizable-column-id="first_name" >First Name</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> </tr> <tr> <td>2</td> <td>Jacob</td> </tr> <tr> <td>3</td> <td>Larry the Bird</td> </tr> </tbody> </table> </div> <div class="tab-pane" id="panel-940157"> <table class="table table-bordered" data-resizable-columns-id="demo-table" id="tb"> <thead> <tr> <th data-resizable-column-id="##">#</th> <th data-resizable-column-id="first_name#" >First Name</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Aaron</td> </tr> <tr> <td>2</td> <td>Abbott</td> </tr> <tr> <td>3</td> <td>Adolph</td> </tr> </tbody> </table> </div> </div> </div> </div> </div></div> 展开
 我来答
你好可爱ghp
2018-03-26 · TA获得超过980个赞
知道小有建树答主
回答量:3015
采纳率:89%
帮助的人:288万
展开全部
一、引入文件:

复制代码代码如下:

<script src="/js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="/js/store.js" type="text/javascript"></script>
<script src="/js/jquery.resizableColumns.js" type="text/javascript"></script>

二、TABLE

复制代码代码如下:

<table id="myTable" border="1">
<thead>
<tr>
<th data-resizable-column-id="a"><input type="checkbox" /></th>
<th data-resizable-column-id="b">栏目类型 </th>
<th data-resizable-column-id="c">活动名称 </th>
<th data-resizable-column-id="d">状态 </th>
<th data-resizable-column-id="e">操作选项</t
追问
这个可以拖动,我加上bootstrap的切换卡才不支持拖动的
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式