穿梭框组件,基于 Bootstrap-Table
- <script>标签引入:dist/bs-transfer.min.js
- 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渲染后执行 | |
array | 互斥字段。示例:['field']、['upperField', 'lowerField'] |
属性 | 类型 | 说明 |
---|---|---|
id | string | 标识 |
defaultOptions | object | 默认配置项 |
方法 | 参数 | 说明 |
---|---|---|
upperTable | 原 Bootstrap Table 参数 | 调用上层表格的方法 |
lowerTable | 原 Bootstrap Table 参数 | 调用下层表格的方法 |
twoTables | 原 Bootstrap Table 参数 | 同时调用两个表格的方法 |
adjustHeight | 调整两个表格高度 |