/bs-transfer

穿梭框组件，基于 Bootstrap-Table

Primary LanguageJavaScriptApache License 2.0Apache-2.0

BS Transfer

穿梭框组件，基于 Bootstrap-Table

安装

  1. <script>标签引入：dist/bs-transfer.min.js
  2. ES Module 引入：dist/bs-transfer.mjs

示例

<link href="path/to/bootstrap-v3.css" rel="stylesheet">
<link href="path/to/bootstrap-table.css" rel="stylesheet">
<script src="path/to/jquery.js" type="text/javascript"></script>
<script src="path/to/bootstrap-v3.js" type="text/javascript"></script>
<script href="path/to/bootstrap-table.js" type="text/javascript"></script>
<script src="path/to/bs-transfer.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var transfer = new BsTransfer({
        mountPoint: '#transferDiv',
        tableOptions: {
            columns: [
                {field: 'username', title: '账号'},
                {field: 'password', title: '密码'},
            ],
        },
        upperOptions: {
            url: '/upper-api',
        },
        lowerOptions: {
            url: '/lower-api',
        },
        toUpper: function () {},
        toLower: function () {},
    });
    transfer.upperTable('getSelections');   // 调用上层表格的方法
    transfer.lowerTable('getSelections');   // 调用下层表格的方法
</script>

构造函数

参数 类型 说明
options object 配置项

配置项说明

名称 类型 默认值 说明
mountPoint string/Element/jQuery 挂载点，可以是 jQuery 选择器，或元素对象
tableOptions object {...} 公共的 Bootstrap Table 参数
upperOptions object {} 上层表格的参数
lowerOptions object {} 下层表格的参数
toUpper function 向上按钮的点击事件
toLower function 向下按钮的点击事件
afterRender function 等待GUI渲染后执行
mutexFields array 互斥字段。示例：['field']、['upperField', 'lowerField']

静态属性

属性 类型 说明
id string 标识
defaultOptions object 默认配置项

实例方法

方法 参数 说明
upperTable 原 Bootstrap Table 参数 调用上层表格的方法
lowerTable 原 Bootstrap Table 参数 调用下层表格的方法
twoTables 原 Bootstrap Table 参数 同时调用两个表格的方法
adjustHeight 调整两个表格高度