BootstrapTable表格数据左右移动功能遇到的问题（数据左右移动，列表拖拽排序，模糊查询列表数据定位）...

最新推荐文章于 2024-10-15 12:47:42 发布

apr16037

最新推荐文章于 2024-10-15 12:47:42 发布

阅读量1.8k

点赞数

文章标签： ui json

原文链接：http://www.cnblogs.com/slsddy/p/11379143.html

版权

本文介绍了如何使用BootstrapTable实现数据左右移动、全选移动、添加序号、拖拽排序和模糊查询定位等功能。在实现过程中，遇到了数据移动后的归属问题和排序问题，通过优化代码解决了这些问题。文章提供了有bug的原始代码作为反面示例，并简述了最终解决方案。

摘要由CSDN通过智能技术生成

　　使用bootstrapTable实现数据左右移动的功能其实做过很多了，但原来实现的功能都是比较单一，都是选中单条数据进行移动。这次需要实现的功能比较全面，中间遇到不少的坑，此次正好在这里将所有的功能代码梳理一下。

实现以下功能：

1.选中单条数据进行左右移动

2.将列表中所有数据全部进行左右移动

3.左边的数据移动到右边后，为其增加一个序号列，并根据右侧列表的数据自动递增序号

4.右侧列表中的数据可以随意拖动排序，序号自动变更

5.在列表上的搜索框输入关键字，定位到列表中对应的数据并选中

html代码：

 1                 <div class="movebox clearfix box-padding10">
 2                     <div class="movebox-left fl">
 3                         <p>可选考核项目</p>
 4                         <div class="form-inline form-inline-auto" style="padding-right: 0;">
 5                             <div class="form-group t-right10">
 6                                 <select class="form-control" style="min-width: 110px" id="kaoheFW" name="kaoheFW">
 7                                     <option value="2">专科</option>
 8                                     <option value="1">公共</option>
 9                                 </select>
10                             </div>
11                             <div class="form-control-radio" style="width: auto; min-width: 0;">
12                                 <input type="radio" class="radio" name="leixing" value="" checked>
13                                 <label class="f-left t-right10 t-lineheight28">全部</label>
14                                 <input type="radio" class="radio" name="leixing" value="2">
15                                 <label class="f-left t-right10 t-lineheight28">操作</label>
16                                 <input type="radio" class="radio" name="leixing" value="1">
17                                 <label class="f-left t-right10 t-lineheight28">理论</label>
18                             </div>
19                             <div class="form-group">
20                                 <input class="form-control" placeholder="请输入考核项目" type="text" value="" id="kaoheXM">
21                             </div>
22                         </div>
23                         <div class="clear"></div>
24                         <div class="form-table-height main-y-scroll" id="kaoheXMList">
25                             <table class="table table-striped table-bordered table-hover text-center" id="tableleft">
26                                 <thead>
27 
28                                 </thead>
29                                 <tbody></tbody>
30                             </table>
31                         </div>
32                         <div class="space"></div>
33                     </div>
34                     <div class="movebox-btn fl">
35                         <span id="add_all" class=