BootstrapTable表格数据左右移动功能遇到的问题（数据左右移动，列表拖拽排序，模。。。
使⽤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" >
5<div class="form-group t-right10">
6<select class="form-control" id="kaoheFW" name="kaoheFW">
7<option value="2">专科</option>
8<option value="1">公共</option>
9</select>
10</div>
11<div class="form-control-radio" >
bootstrap项目12<input type="radio" class="radio" name="leixing" value="" checked>
13<label class="f-left t-right10 t-lineheight28">全部</label>
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="icon iconfont icon-youshuangjiantou"></span>
36<span id="add" class="icon iconfont icon-jiantou-you" onclick="add_keShiKHXM()"></span>
37<span id="remove" class="icon iconfont icon-jiantou-zuo" onclick="remove_keShiKHXM()"></span> 38<span id="remove_all" class="icon iconfont icon-zuoshuangjiantou"></span>
39</div>
40<div class="movebox-right fl">
41<p>已选择考核项⽬</p>
42<div class="form-inline form-inline-auto" >
43<div class="form-group t-right10">
44<select class="form-control" id="keshiKHFW" name="keshiKHFW">
45<option value="2">专科</option>
46<option value="1">公共</option>
47</select>
48</div>
49<div class="form-control-radio" >
50<input type="radio" class="radio" name="keshiLX" value="" checked>
51<label class="f-left t-right10 t-lineheight28">全部</label>
52<input type="radio" class="radio" name="keshiLX" value="2">
53<label class="f-left t-right10 t-lineheight28">操作</label>
54<input type="radio" class="radio" name="keshiLX" value="1">
55<label class="f-left t-right10 t-lineheight28">理论</label>
56</div>
57<div class="form-group">
58<input class="form-control" placeholder="请输⼊考核项⽬" type="text" value="" id="keshiKHXM"> 59</div>
60</div>
61<div class="clear"></div>
62<div class="form-table-height main-y-scroll" id="keshiKHXMList">
63<table class="table table-striped table-bordered table-hover text-center" id="tableright">
64<thead>
65
66</thead>
67<tbody>
68</tbody>
69</table>
70</div>
71<p class="t-gray">说明：拖拽⾏进⾏排序</p>
72</div>
73</div>
View Code
初始化bootstraptable:
1function Init_kaoHeXM() {
2
3//获取关键字
4var kaoHeFW = $('#kaoheFW option:selected').val();;
5var kaoHeLX = $('input[name="leixing"]:checked').val();
6
7 $('#tableleft').bootstrapTable("destroy");
8//初始化table
9 $('#tableleft').bootstrapTable({
10 url: "/HLGL/ChengJiGL/GetkaoheXMList",
11 postData: function () {
12return { "keShiID": keShiID, "kaoHeFW": kaoHeFW, "kaoHeLX": kaoHeLX }
13 },
14 columns: [
15 { field: 'KAOHEXMID', title: "考核项⽬ID", visible: true },
16 { field: 'XIANGMUMC', title: "项⽬名称", visible: true },
17 { field: 'KAOHELX', title: "考核类型", visible: true, formatterType: 'JSON', formatter: { '1': '理论', '2': '操作' } } 18
19 ],
20 pagination: false,
21 autoSelectFirstRow: false,
22//height: $(window).height() - 117
23 });
24 }
25function Init_keShiKHXM() {
26//获取关键字
27var kaoHeFW = $('#keshiKHFW option:selected').val();;
28var kaoHeLX = $('input[name="keshiLX"]:checked').val();
29
30 $('#tableright').bootstrapTable("destroy");
31 $('#tableright').bootstrapTable({
32 url: "/HLGL/ChengJiGL/GetkeshiKHXMList",
33 postData: function () {
34return { "keShiID": keShiID, "kaoHeFW": kaoHeFW, "kaoHeLX": kaoHeLX }
35 },
36 columns: [
37 { field: 'PAIXUXH', title: "排序序号", width: "5%", visible: true, class: "index", },
38 { field: 'KESHIKHXMID', title: "科室考核项⽬ID", visible: false },
39 { field: 'KAOHEXMID', title: "考核项⽬ID", visible: true },
40 { field: 'XIANGMUMC', title: "项⽬名称", visible: true },
41 { field: 'KAOHELX', title: "考核类型", visible: true, formatterType: 'JSON', formatter: { '1': '理论', '2': '操作' } } 42
43 ],
44 pagination: false,//不分页
45 autoSelectFirstRow: false//默认不选中第⼀⾏
46//height: $(window).height() - 117
47 })
48 }
View Code
初始化后定义了两个变量存放bootstrapTable：
$tableLeft = $('#tableleft').bootstrapTable();
$tableRight = $('#tableright').bootstrapTable();
下⾯就开始实现第⼀个功能：选中单条数据进⾏左右移动 ，右移时增加序号列并在原有基础上递增这个功能⽐较简单，没有什么需要注意的地⽅
1//添加科室考核项⽬
2function add_keShiKHXM() {
3//注意getSelectedRow这个是内部重新封装的⽅法，原⽣获取选中⾏应该是$("#tableleft").bootstrapTable('getSelections');
4var selectContent = $tableLeft.bootstrapTable('getSelectedRow');
5if (selectContent == "" || selectContent==null || selectContent == undefined) {
6 HRP.AlertError("请先选择需要操作的数据！");
7return false;
8 }
9 selectContent.KESHIID = keShiID;
10
11//获取到右侧列表的排序序号，给左侧选中⾏进⾏设置
12var len = $('#tableright tr .index').length;
13if (len == 1)
14 { selectContent.PAIXUXH = 1; }
15else {
16 selectContent.PAIXUXH = parseInt($('#tableright tr').eq(len - 1).children(0).eq(0)[0].innerText) + 1;//len-1 是因为有标题列
17 }
18
19
20 $tableRight.bootstrapTable("append", selectContent);
21var selects = $tableLeft.bootstrapTable('getSelectedRow');
22
23var KAOHEXMID = selects.KAOHEXMID;
24
25 $tableLeft.bootstrapTable('remove', {
26 field: 'KAOHEXMID',
27 values: [String(KAOHEXMID)]
28 });
29
30 }
31
32//移除科室考核项⽬
33function remove_keShiKHXM() {
34//注意getSelectedRow这个是内部重新封装的⽅法，原⽣获取选中⾏应该是$("#tableright").bootstrapTable('getSelections');
35var selectContent = $tableRight.bootstrapTable('getSelectedRow');
36if (selectContent == "" || selectContent==null || selectContent == undefined) {
37 HRP.AlertError("请先选择需要操作的数据！");
38return false;
39 }
40
41
42 $tableLeft.bootstrapTable("append", selectContent);
43var selects = $tableRight.bootstrapTable('getSelectedRow');
44
45var daima = selects.KAOHEXMID;
46 $tableRight.bootstrapTable('remove', {
47 field: 'KAOHEXMID',
48 values: [String(daima)]
49 });
50 };
第⼆个功能：将列表所有数据进⾏左右移动
1 $("#add_all").click(function () {
2
3if ($("#tableleft -records-found").length > 0) {
4 HRP.AlertError("当前没有可以操作的数据！");
5return false;
6 }
7 $("#tableright -records-found").remove();//这⼀句是删除掉表格中没有数据时的提⽰⾏
8// $("#tableright").find(".no-records-found").remove();·
9var len = 0;
10if ($("#tableright tbody tr").length == 0) {
11 len = 1;
12 }
13else {
14 len = parseInt($("#tableright tbody tr:last-child .index").html()) + 1;
15 }
16
17//下⾯两个for循环不能合在⼀起，因为delete以后eq(i)获取的数据会随着改变，不是原来索引的数据
18for (var i = 0; i < $("#tableleft tbody tr").length; i++) {
19var content = {"PAIXUXH":len,"KAOHEXMID":$("#tableleft tbody tr").eq(i).find("td")[0].innerText,"XIANGMUMC":$("#tableleft tbody tr").eq(i).find("td")[1].innerText,"KAOHELX":$("#tableleft tbody tr").eq(i).find("td")[2].innerText}
20 $tableRight.bootstrapTable("append", content);
21 len++;
22 }
23
24//$("#tableleft tbody tr").remove();
25//这⾥不能⽤remove，此时需要⽤bootstrapTable⾃带的删除，否则下次对表进⾏操作时remove的数据会再次出现
26//
27
28var xiangMuLength = $("#tableleft tbody tr").length;
29for (var j = 0; j < xiangMuLength; j++) {
30var index = $("#tableleft tbody tr").eq(0).attr("data-index");
31 $tableLeft.bootstrapTable('deleteRow',Number());
32 }
33 });
34
35 $("#remove_all").click(function () {
36if ($("#tableright -records-found").length > 0) {
37 HRP.AlertError("当前没有可以操作的数据！");
38return false;
39 }
40 $("#tableleft -records-found").remove();
41 $("#tableright tbody td.index").remove();
42
43
44//下⾯两个for循环不能合在⼀起，因为delete以后eq(i)获取的数据会随着改变，不是原来索引的数据
45for (var i = 0; i < $("#tableright tbody tr").length; i++) {
46
47var content = {};
48 content = {"KAOHEXMID":$("#tableright tbody tr").eq(i).find("td")[0].innerText,"XIANGMUMC":$("#tableright tbody tr").eq(i).find("td")
[1].innerText,"KAOHELX":$("#tableright tbody tr").eq(i).find("td")[2].innerText}
49 $tableLeft.bootstrapTable("append", content);
50 }
51
52var keShiXMLength = $("#tableright tbody tr").length;
53for (var j = 0; j < keShiXMLength; j++) {
54
55var index = $("#tableright tbody tr").eq(0).attr("data-index");
56 $tableRight.bootstrapTable('deleteRow',Number());
57 }
58
59
60 });
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论