jquery+bootstrap-table实现列表勾选穿梭框效果代码
代码语言：html
所属分类：其他
代码描述：jquery+bootstrap-table实现列表勾选穿梭框效果代码，从左侧勾选数据，点击中间的向右箭头可穿梭到右侧列表中，反之亦可。
代码标签： jquery bootstrap table 列表 勾选 穿梭框
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap-table.min.css">
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div id="transferContainer" class="row" style="height: 700px;width: 950px;"></div>
<div>
中间点击按钮图标没显示出来没关系 是因为引入的cdn问题 正常下载引入bootstrap.css的话没问题<br> 'getData' 内置方法 selectData是获取选中的数据 后面importUnitId 是收集的字段 如果需要收集多个字段就改为数组<br> $('#transferContainer').transfer('getData', 'selectData', 'importUnitId')
</div>
<h3>数据在后台 coonsole中查看</h3>
<button id='btn' class="btn btn-primary">获取已选数据</button>
<div>
刷新分两种 如果是通过url获取的数据 刷新 直接运行$('#transferContainer').transfer('refresh')即可刷新 <br> 若是和示例一样 本地的数据 则用 $('#transferContainer').transfer('refresh',data)后面为对应数据源<br> 注意两种刷新都是基于 数据源为同一个 数据源不同不咬用刷新
</div>
<button id='refresh' class="btn btn-primary">刷新</button>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.4.3.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap-table-zh-CN.min.js"></script>
<script>
(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: {},
singleSelect:false,
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 fa fa-lg fa-angle-double-right" ><i class="glyphicon glyphicon-forward"></i></span>',
'<span class="btn btn-default backwardBtn fa fa-lg fa-angle-double-left" ><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('刷新啦')
if(this.option.licenseFlag){
window.refreshTransferCallback();
}
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',
singleSelect: _this.option.singleSelect,
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,
singleSelect: _this.option.singleSelect,
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.$for.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0