jquery+bootstrap-table实现列表勾选穿梭框效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：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-lef.........完整代码请登录后点击上方下载按钮下载查看