Transfer 穿梭框

穿梭框组件，用于在两栏中移动数据。

基础用法

<div id="demo-transfer"></div>

<script>
  const transfer = new SaTransfer('#demo-transfer', {
    data: [
      { key: '1', label: '选项1' },
      { key: '2', label: '选项2' },
      { key: '3', label: '选项3' },
      { key: '4', label: '选项4' },
      { key: '5', label: '选项5' }
    ],
    targetKeys: [],
    titles: ['列表1', '列表2'],
    onChange: (targetKeys) => {
      console.log('目标键:', targetKeys);
    }
  });
</script>

加载 SanoUI 组件中...

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
options	配置选项	SaTransferOptions	{}

配置选项

参数	说明	类型	可选值	默认值
data	数据源	Array<TransferItem>	-	[]
targetKeys	目标键数组	Array<string>	-	[]
titles	标题数组	Array<string>	-	['列表1', '列表2']
filterable	是否可搜索	boolean	-	false
onChange	变化回调	function(targetKeys: Array<string>)	-	-

TransferItem 配置

参数	说明	类型	默认值
key	唯一标识	string	-
label	显示文本	string	-
disabled	是否禁用	boolean	false

方法

方法名	说明	参数	返回值
setTargetKeys	设置目标键	targetKeys: Array<string>	void
getTargetKeys	获取目标键	-	Array<string>
destroy	销毁实例	-	void

示例代码

手动创建实例

const transfer = new SaTransfer('#my-transfer', {
  data: [
    { key: '1', label: '选项1' },
    { key: '2', label: '选项2' },
    { key: '3', label: '选项3' },
    { key: '4', label: '选项4' }
  ],
  targetKeys: ['1', '2'],
  titles: ['可用列表', '已选列表'],
  filterable: true,
  onChange: (targetKeys) => {
    console.log('目标键变化:', targetKeys);
  }
});

// 设置目标键
transfer.setTargetKeys(['1', '3']);

// 获取目标键
const targetKeys = transfer.getTargetKeys();

实际使用场景

场景 1：角色权限分配

使用穿梭框分配角色权限。

<div id="role-transfer" style="height: 400px;"></div>
<button class="sa-button sa-button--primary" onclick="savePermissions()" style="margin-top: 1rem;">保存权限</button>

<script>
  const transfer = new SaTransfer('#role-transfer', {
    data: [
      { key: 'user-view', label: '查看用户' },
      { key: 'user-add', label: '添加用户' },
      { key: 'user-edit', label: '编辑用户' },
      { key: 'user-delete', label: '删除用户' },
      { key: 'role-view', label: '查看角色' },
      { key: 'role-add', label: '添加角色' },
      { key: 'role-edit', label: '编辑角色' },
      { key: 'role-delete', label: '删除角色' }
    ],
    targetKeys: ['user-view', 'user-add'],
    titles: ['可用权限', '已分配权限'],
    filterable: true,
    onChange: (targetKeys) => {
      console.log('已分配的权限:', targetKeys);
    }
  });
  
  function savePermissions() {
    const targetKeys = transfer.getTargetKeys();
    alert('保存的权限：\n' + targetKeys.join('\n'));
  }
</script>

加载 SanoUI 组件中...

场景 2：用户组管理

使用穿梭框管理用户组成员。

<div id="user-transfer" style="height: 400px;"></div>

<script>
  const transfer = new SaTransfer('#user-transfer', {
    data: [
      { key: 'user1', label: '张三' },
      { key: 'user2', label: '李四' },
      { key: 'user3', label: '王五' },
      { key: 'user4', label: '赵六' },
      { key: 'user5', label: '钱七' }
    ],
    targetKeys: ['user1', 'user2'],
    titles: ['所有用户', '组成员'],
    filterable: true,
    onChange: (targetKeys) => {
      console.log('组成员:', targetKeys);
    }
  });
</script>

加载 SanoUI 组件中...