以下为项目实现效果：
图表运用了bootstrap-table，左右两边的表格可以进行内容交换，可全选，可搜索。
以下附上代码：
areaSite.html
"en">
"utf-8">
地区站点
"stylesheet" type="text/css" href="../css/reset.css" />
"stylesheet" type="text/css" href="../css/bootstrap.css" />
"stylesheet" type="text/css" href="../css/bootstrap-table.min.css" />
"stylesheet" type="text/css" href="../css/areaSite.css" />
"instrumentLogCon">
"tran">
"save-box">
"javascript:;" class="determine" id="save">保存
复制代码areaSite.css
.instrumentLogCon {
width:70%;
padding:20px;
border: 1px solid #dcdcdc;
}
.area {
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
#tran {
width: 100%;
height: 400px;
}
.transferBox {
height: 100%;
}
.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,
.btn-info {
width: 74px;
height: 34px;
color: white;
text-shadow: none;
border: 0;
cursor: no-drop;
background: #30b0fd;
background: -moz-linear-gradient(left, #30b0fd 0%, #1f94f3 100%);
background: -webkit-linear-gradient(left, #30b0fd 0%, #1f94f3 100%);
background: linear-gradient(to right, #30b0fd 0%, #1f94f3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#30b0fd', endColorstr='#1f94f3', GradientType=1);
}
.btn-info {
cursor: pointer;
}
.fixed-table-container {
min-height: 302px!important;
padding-bottom: 41px!important;
border: 0;
}
.bootstrap-table .table > thead > tr > th {
border-bottom: 0;
}
.unselectTitle,
.selectTitle {
padding: 10px 0 0 0!important;
}
.save-box {
text-align: center;
margin-top: 40px;
}
.fixed-table-container thead th:first-child:not([data-not-first-th]),
.fixed-table-container tbody td:first-child {
border-left: 1px solid #ededed;
}
.unselectTitle,
.selectTitle {
margin-bottom: 10px !important;
font-size: 18px;
}
#save{
display: inline-block;
width: 90px;
height: 40px;
background: #30b0fd;
background: -moz-linear-gradient(left, #30b0fd 0%, #1f94f3 100%);
background: -webkit-linear-gradient(left, #30b0fd 0%, #1f94f3 100%);
background: linear-gradient(to right, #30b0fd 0%, #1f94f3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#30b0fd', endColorstr='#1f94f3', GradientType=1);
font-size: 16px;
color: white;
text-align: center;
line-height: 40px;
border-radius: 4px;
} 复制代码areaSite.js
$(document).ready(function(){
// 常规配置方式和区域配置方式切换
$(".dataAndLongRange span").click(function(){
$(this).addClass("selected").siblings("span").removeClass("selected").parent().siblings(".dataAndLongRangeCon").children("div").eq($(this).index()).addClass("selected").siblings().removeClass("selected");
})
var data = [
{
"importUnitId": '1',
"importUnitName": "站点1",
"flag": false
},
{
"importUnitId": '2',
"importUnitName": "站点2",
"flag": false
},
{
"importUnitId": '3',
"importUnitName": "站点3",
"flag": false,
},
{
"importUnitId": '4',
"importUnitName": "站点4",
"flag": false
},
{
"importUnitId": '5',
"importUnitName": "站点5",
"flag": true
},
{
"importUnitId": '6',
"importUnitName": "站点6",
"flag": true
}
]
transfer(data)
// 保存
$('#save').click(function () {
var data= $('#tran').transfer('getData', 'selectData', 'importUnitId');
console.log(data)
})
});
// 给穿梭框赋值
function transfer(data) {
// 销毁实例
$('#tran').transfer('destroy')
// 重新渲染
$('#tran').transfer({
titles: ['无权限站点列表', '已有权限站点列表'],
search: true,
uniqueId: "importUnitId",//唯一id
dataSource: data,
maxSelect: 6,
diffKey: 'flag',
unselectColumns: [{
field: 'flag',
checkbox: true
},
{
field: 'importUnitName',
title: '站点列表'
}
]
});
}复制代码transfer2.js
(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,
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();
this.classifyData();
this.initEvent();
},
/*
* 渲染穿梭框页面结构*/
initContainer: function () {
var _this=this;
var containerHtml=['',
''
+this.unselectTitle+'()',
'
',
'',
'',
'',
'添加 >>',
'<< 移出',
'',
'',
'',
''
+this.selectTitle+'()',
'
',
''].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;iif(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(){
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){
if(typeof this.option.url=='string'){
this.option.url=[this.option.url];
}
if(typeof this.option.type=='string'){
this.option.type=[this.option.type];
}
/* if(typeof this.option.queryParams=='string'){
this.option.queryParams=[this.option.queryParams];
}*/
$.ajax({
url: _this.option.url[0],
type: _this.option.type[0],
data:_this.option.queryParams[0],
contentType: 'application/json', //对应后台的@RequestBody
success: function (res) {
if(res.success){
}
},
error: function (result) {
}
});
}
},
/*
* 初始化点击事件*/
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){
ns.failMsg(this.selectTitle+'最多只能存在'+this.option.maxSelect+'个，您选的太多了！');
return false;
}
}
for(var i=0;iif(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;iif(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;ireturn obj;
});
}else{
return this[type];
}
},
/*
* 销毁实例*/
destroy :function () {
this.$el.html('');
}
}
var allowedMethods = ['refresh','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); 复制代码 剩下的bootstrap以及bootstrap-table的代码我就不放上来啦，需要的自行去官网下载哦~