來源於 https://blog.csdn.net/liwg123/article/details/79128252
7.24全部更新了一下 增加了通過url獲取數據 增加了刷新數據的方法（都是針對數據源為同一個）
另外新增了數據源為兩個時 刷新左側 和右側數據的方法
————————————————————————以下原文——————————————————————————
封裝了一個基於bootstrapTable穿梭框，可支持兩個表格穿梭（其實本身就是），有需求的可看下。
Dom下載地址下載地址
用法
用的時候要引入bootstrapTable.min.js 以及css
1 $('#transferContainer').transfer({ 2 titles:['待選對比檔案','已選對比檔案'], 3 search: true, 4 uniqueId: "importUnitId", 5 dataSource:data, 6 diffKey:'flag', 7 unselectColumns:[ 8 { 9 field: 'flag', 10 checkbox: true 11 }, 12 { 13 field: 'importUnitName', 14 title: '檔案名稱' 15 } 16 ] 17 });
獲取待選數據和已選數據用
取已選表格選數據： $('#transferContainer').transfer('getData','selectData') 獲取待選表格選數據： $('#transferContainer').transfer('getData','unselectData')
刷新表格（只針對數據源為同一個）
當通過url請求獲取數據時用：$('#transferContainer').transfer('refresh')刷新
當為本地數據時用：
$('#transferContainer').transfer('refresh',data)刷新
刷新表格（只針對數據源為兩個）
//刷新左側數據（待選數據） $('#transferContainer').transfer('refreshLeft', data1); //刷新右側數據（已選數據） $('#transferContainer').transfer('refreshRight', data1);
效果
默認參數設置
我的數據源為同一個，通過diffKey去區分的左右兩個表格數據，您的數據源如果是兩個那直接賦值到dataSource、selectdataSource即可
transfer.DEFAULTS = { titles:['待選列表','已選列表'], search: true,///是否顯示搜索查詢 showRefresh: false,// clickToSelect: true, pagination: false,//是否支持分頁 autoHeight:false, url:'', type:"get", queryParams:{}, contentType: 'application/json', paginationDetail:false, maxSelect:undefined, uniqueId: "",//每行的id dataSource:[],//默認數據源為同一個 內部會通過diffKey去區分是待選框的 還是已選框的數據，如果selectdataSource存在 則或解析為待選數據框里的數據 selectdataSource:undefined, diffKey:'flag', selectColumns:[], unselectColumns:[] };
完整JS代碼
/** * Created by liwg on 2018/1/19. */ (function($, window, document) { var transfer = function(el, options) { this.option = options; this.$el = $(el); this.selectData = []; this.unselectData = []; this.init(); }; transfer.DEFAULTS = { titles: ['待選列表', '已選列表'], search: true, ///是否顯示搜索查詢 showRefresh: false, // clickToSelect: true, pagination: false, //是否支持分頁 autoHeight: false, url: '', type: "get", queryParams: {}, contentType: 'application/json', paginationDetail: false, maxSelect: undefined, uniqueId: "", //每行的id dataSource: [], //默認數據源為同一個 內部會通過diffKey去區分是待選框的 還是已選框的數據，如果selectdataSource存在 則或解析為待選數據框里的數據 selectdataSource: undefined, diffKey: 'flag', selectColumns: [], unselectColumns: [] }; transfer.prototype = { init: function() { this.initoption(); this.initContainer(); this.initBothTable(); if (this.option.url) { this.initServer(); } else { this.classifyData(); } this.initEvent(); }, /* * 渲染穿梭框頁面結構*/ initContainer: function() { var _this = this; var containerHtml = ['<div class="col-sm-5 transferBox">', '<h3 class="unselectTitle" style="margin: 0;padding: 5px 0 10px 0;">' + this.unselectTitle + '<span style="margin-left: 5px;">(<span id="checkedNum1"></span><span id="unselectTotalNum"></span>)</span></h3>', '<table id="transferUnselectTable"></table>', '</div>', '<div class="col-sm-2 transferBtn" style="height: 100%">', '<div class="btnList">', '<span class="btn btn-default forwardBtn" ><i class="glyphicon glyphicon-forward"></i></span>', '<span class="btn btn-default backwardBtn" ><i class="glyphicon glyphicon-backward"></i></span>', '</div>', '</div>', '<div class="col-sm-5 transferBox">', '<h3 class="selectTitle" style="margin: 0;padding: 5px 0 10px 0;">' + this.selectTitle + '<span style="margin-left: 5px;">(<span id="checkedNum2"></span><span id="selectTotalNum"></span>)</span></h3>', '<table id="transferSelectTable"></table>', '</div>' ].join(''); this.$el.html(containerHtml); this.$unselectTable = this.$el.find('#transferUnselectTable'); //待選表格 this.$unselectTotalNum = this.$el.find('#unselectTotalNum'); //存放待選表格內總的數量 this.$checkedNum1 = this.$el.find('#checkedNum1'); //存放待選表格中已勾選的數量 this.$forwardBtn = this.$el.find('.forwardBtn'); //向待選表格內添加的按鈕 this.$selectTable = this.$el.find('#transferSelectTable'); //已選表格 this.$selectTotalNum = this.$el.find('#selectTotalNum'); //存放已選表格內總的數量 this.$checkedNum2 = this.$el.find('#checkedNum2'); //存放已選表格中已勾選的數量 this.$backwardBtn = this.$el.find('.backwardBtn'); //向待選表格內添加的按鈕 this.option.height = this.$el.outerHeight() - this.$el.find('h3.unselectTitle').outerHeight() - 8; }, /* * 參數處理*/ initoption: function() { /* * 兩邊標題參數處理*/ if (typeof this.option.titles == 'string' || (this.option.titles instanceof Array && this.option.titles.length == 1)) { this.selectTitle = this.unselectTitle = this.option.titles + ''; } else if (this.option.titles instanceof Array && this.option.titles.length > 1) { this.unselectTitle = this.option.titles[0]; this.selectTitle = this.option.titles[1]; } /* * 兩個table渲染內容若一樣，給任意一個columns即可*/ if (this.option.selectColumns instanceof Array && this.option.unselectColumns instanceof Array && (!this.option.selectColumns.length && this.option.unselectColumns.length)) { this.option.selectColumns = JSON.parse(JSON.stringify(this.option.unselectColumns)); } else if (this.option.selectColumns instanceof Array && this.option.unselectColumns instanceof Array && (this.option.selectColumns.length && !this.option.unselectColumns.length)) { this.option.unselectColumns = JSON.parse(JSON.stringify(this.option.selectColumns)); } else if (!this.option.selectColumns instanceof Array || !this.option.unselectColumns instanceof Array) { console.error('參數selectColumns和unselectColumns必須為數組'); return false; } /* * 兩邊table兩邊渲染選中的field不能一樣，此處強制替換了，參數中可不寫field*/ this.option.selectColumns[0].field = this.option.diffKey + 's'; this.option.unselectColumns[0].field = this.option.diffKey; }, /* * 從數據中挑出已選列表和待選列表的數據*/ classifyData: function() { /* *數據源如果為同一個則通過diffKey去區分 * */ if (!this.option.dataSource) { console.error('dataSource參數為必填項，請檢查'); return false; } if (this.option.selectdataSource) { this.selectData = this.option.selectdataSource; this.unselectData = this.option.dataSource; } else { for (var i = 0; i < this.option.dataSource.length; i++) { if (this.option.dataSource[i][this.option.diffKey]) { this.selectData.push(this.option.dataSource[i]); } else { this.unselectData.push(this.option.dataSource[i]); } } } this.refreshTable(); this.showTotalNum(); }, /* * 當數據發生變化重新渲染表格*/ refreshTable: function() { console.log('刷新啦') this.$unselectTable.bootstrapTable("load", this.unselectData); this.$selectTable.bootstrapTable("load", this.selectData); }, /* * 當表格數據總量發生變化，相應改變其總數*/ showTotalNum: function() { this.$unselectTotalNum.html(this.unselectData.length + '條'); this.$selectTotalNum.html(this.selectData.length + '條'); }, /* * 初始化表格，開始是沒有數據加入*/ initBothTable: function() { var _this = this; this.$unselectBootstrapTable = this.$unselectTable.bootstrapTable({ search: _this.option.search, showRefresh: _this.option.showRefresh, showToggle: false, showColumns: false, paginationDetail: _this.option.paginationDetail, clickToSelect: _this.option.clickToSelect, pagination: _this.option.pagination, sidePagination: 'client', autoHeight: false, height: _this.option.height, data: [], sortName: "createTime", sortOrder: "desc", uniqueId: _this.option.uniqueId, columns: _this.option.unselectColumns }); this.$selectBootstrapTable = this.$selectTable.bootstrapTable({ search: _this.option.search, showRefresh: _this.option.showRefresh, showToggle: false, paginationDetail: _this.option.paginationDetail, showColumns: false, clickToSelect: _this.option.clickToSelect, pagination: _this.option.pagination, autoHeight: false, height: _this.option.height, data: [], sortName: "createTime", sortOrder: "desc", uniqueId: _this.option.uniqueId, columns: _this.option.selectColumns }); this.$selectBootstrapTable.on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function(e, rows) { var num = _this.$selectTable.find('tr input[name="btSelectItem"]:checked').length; if (num) { _this.$backwardBtn.removeClass('btn-default').addClass('btn-info'); _this.$checkedNum2.html(num + '/'); } else { _this.$backwardBtn.removeClass('btn-info').addClass('btn-default'); _this.$checkedNum2.html(''); } }); this.$unselectBootstrapTable.on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function(e, rows) { var num = _this.$unselectTable.find('tr input[name="btSelectItem"]:checked').length; if (num) { _this.$forwardBtn.removeClass('btn-default').addClass('btn-info'); _this.$checkedNum1.html(num + '/'); } else { _this.$forwardBtn.removeClass('btn-info').addClass('btn-default'); _this.$checkedNum1.html(''); } }); }, /* * 請求數據*/ initServer: function() { var _this = this; if (this.option.url) { $.ajax({ url: _this.option.url, type: _this.option.type, contentType: _this.option.contentType, //對應后台的@RequestBody data: _this.option.contentType === 'application/json' && _this.option.type === 'post' ? JSON.stringify(_this.option.queryParams) : _this.option.queryParams, success: function(res) { if (res.success) { _this.option.dataSource = res.data; _this.selectData = []; _this.unselectData = []; _this.classifyData(); } }, error: function(result) { console.log(11); } }); } }, /* * 初始化點擊事件*/ initEvent: function() { var _this = this; this.$forwardBtn.click(function() { _this.transferData($(this), 1); }); this.$backwardBtn.click(function() { _this.transferData($(this), 0); }); }, /* * 獲取選中行的id*/ getSelect: function($tr) { return $.map($tr, function(ele, index) { if ($(ele).find('input[name="btSelectItem"]').is(':checked')) { return $(ele).attr("data-uniqueid"); } }); }, /* * 兩邊數據穿梭邏輯 * @params type：穿梭方向*/ transferData: function($dom, type) { var _this = this; if (!$dom.hasClass('btn-info')) { return false; } if (type) { var selectList = this.getSelect(this.$unselectTable.find('tbody tr')); if ((this.option.maxSelect - 0) && typeof(this.option.maxSelect - 0) == "number") { var currenNum = selectList.length + this.selectData.length; if (currenNum > this.option.maxSelect) { alert(this.selectTitle + '最多只能存在' + this.option.maxSelect + '個，您選的太多了！'); return false; } } for (var i = 0; i < this.unselectData.length; i++) { if (selectList.indexOf(this.unselectData[i][this.option.uniqueId]) >= 0) { this.unselectData[i][this.option.selectColumns[0].field] = false; this.selectData.push(this.unselectData[i]); this.unselectData.splice(i, 1); i--; } } this.refreshTable(); this.$forwardBtn.removeClass('btn-info').addClass('btn-default'); this.$checkedNum1.html(''); } else { var selectList = this.getSelect(this.$selectTable.find('tbody tr')); for (var i = 0; i < this.selectData.length; i++) { if (selectList.indexOf(this.selectData[i][this.option.uniqueId]) >= 0) { this.selectData[i][this.option.unselectColumns[0].field] = false; this.unselectData.push(this.selectData[i]); this.selectData.splice(i, 1); i--; } } this.refreshTable(); this.$backwardBtn.removeClass('btn-info').addClass('btn-default'); this.$checkedNum2.html(''); } this.showTotalNum(); }, /* * 暴露到外面的實例的方法，可返回兩個表格內的數據集合 * @params type： 必填 unselectData待選列表數據，selectData已選列表數據 * @params arr: 非必填 若不存在直接返回源數據集合，若配置字段名則返回所需的字段集合*/ getData: function(type, arr) { if (!type) { console.error('請填寫想要返回的數據名稱unselectData或selectData'); return false; } if (arr && typeof arr == 'string') { return $.map(this[type], function(item, index) { return item[arr]; }); } else if (arr && arr instanceof Array && arr.length > 0) { return $.map(this[type], function(item, index) { var obj = {}; for (var i = 0; i < arr.length; i++) { obj[arr[i]] = item[arr[i]]; } return obj; }); } else { return this[type]; } }, /* * 銷毀實例*/ destroy: function() { this.$el.html(''); }, /* * 刷新表格 只當數據源為一個時有效*/ refresh: function(data) { if (this.option.url) { this.initServer(); } else { this.option.dataSource = JSON.parse(JSON.stringify(data)); this.selectData = []; this.unselectData = []; this.classifyData(); } }, refreshLeft: function(data) { var uniqueId = this.option.uniqueId var selectDataId = this.getData('selectData', uniqueId); for (var i = 0; i < data.length; i++) { if (selectDataId.indexOf(data[i][uniqueId]) >= 0) { data.splice(i, 1); i--; } } this.$unselectTable.bootstrapTable("load", data); this.unselectData = data; this.showTotalNum(); }, refreshRight: function(data) { this.selectData = data; var uniqueId = this.option.uniqueId var selectDataId = this.getData('selectData', uniqueId); for (var i = 0; i < this.unselectData.length; i++) { if (selectDataId.indexOf(this.unselectData[i][uniqueId]) >= 0) { this.unselectData.splice(i, 1); i--; } } this.$selectTable.bootstrapTable("load", data); this.$unselectTable.bootstrapTable("load", this.unselectData); this.showTotalNum(); } } var allowedMethods = ['refresh', 'refreshLeft', 'refreshRight', 'destroy', 'getData']; $.fn.transfer = function(option) { //向jQuery注冊插件 var e = this, value, args = Array.prototype.slice.call(arguments, 1); e.each(function() { var $this = $(this), data = $this.data('transfer'), options = $.extend({}, transfer.DEFAULTS, $this.data(), typeof option === 'object' && option); if (typeof option === 'string') { if ($.inArray(option, allowedMethods) < 0) { throw new Error("Unknown method: " + option); } if (!data) { return; } value = data[option].apply(data, args); if (option === 'destroy') { $this.removeData('transfer'); } } if (!data) { $this.data('transfer', (data = new transfer(this, options))); } }); return typeof value === 'undefined' ? this : value; }; $.fn.transfer.Constructor = transfer; $.fn.transfer.defaults = transfer.DEFAULTS; $.fn.transfer.methods = allowedMethods; })(jQuery, window, document);
.transferBox{ height: 100%; border: 1px solid #beb8b8; border-radius: 6px; } .shuttleBtn{ height: 100%; } .transferBtn .btn{ display: block; } .transferBtn .btn:first-child{ margin-bottom: 20px; } .transferBtn .btnList{ position: absolute; width: 80%; top: 50%; margin-top: -40px; } .transferBox .search{ width: 100%; } .transferBtn .btn-default{ background: #ccc; cursor: no-drop; }