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

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

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