跳转至

bootstrap数据穿梭插件bootstrap-duallistbox的使用

说明

  • 插件官网：https://www.virtuosoft.eu/code/bootstrap-duallistbox/

  • 下载解压后, 目录大致如下，我下载的3.0.9

alt text

  • 找到demo/index.html文件，修改相关不能使用的CDN相关链接，可参考官网
<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Dual Listbox</title>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css">
        <link rel="stylesheet" type="text/css" href="../src/bootstrap-duallistbox.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
        <script src="https://cdn.virtuosoft.eu/virtuosoft.eu/resources/prettify/prettify.js"></script>
        <script src="../src/jquery.bootstrap-duallistbox.js"></script>
    </head>
    <body class="container">
        .......
    </body>
</html>
  • 在浏览器打开index.html，应该可以看到这个下面这个了

alt text

fastadmin中如何使用

  • 我们将整个文件夹移动到public/assets/libs这个目录下，如图：

alt text

  • 找到public/assets/js/require-backend.js这个文件修改paths及shim依赖配置
    ......
    paths: {
        ......
        'bootstrap-duallistbox': '../libs/bootstrap-duallistbox/dist/jquery.bootstrap-duallistbox.min',
    },
    // shim依赖配置
    shim: {
        ......
        'bootstrap-duallistbox': ['css!../libs/bootstrap-duallistbox/dist/bootstrap-duallistbox.min.css'],
    },
    ......