一套开源的 Web UI 组件库。采用自身极简的模块化规范,并遵循原生 HTML/CSS/JS 的开发模式,极易上手,开箱即用。非常适合网页界面的快速构建。
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

3.5 KiB

属性名 描述 类型 默认值
elem

绑定元素选择器或 DOM 对象

string/DOM -
title

穿梭框左右面板头部标题

array

查看默认值

data

穿梭框的数据源。格式详见:#data 格式

array -
value

初始选中的数据(右侧列表)

array -
id

设置实例唯一索引,用于其他方法传参使用。

string -
showSearch

是否开启搜索。支持以下可选值:

  • false 不开启搜索(默认)
  • true 开启搜索,且匹配时不区分大小写
  • cs 开启搜索,且匹配时区分大小写 2.7+
boolean
string

false

width

定义左右穿梭框宽度

number

200

height

定义左右穿梭框高度

number

360

text

自定义默认文本, object 类型。支持以下属性:

text: {
  none: '无数据', // 没有数据时的文案
  searchNone: '无匹配数据' // 搜索无匹配数据时的文案
} 
onchange

左右穿梭时的回调函数。返回的参数如下:

onchange: function(data, index){
  console.log(data); // 得到当前被穿梭的数据
  console.log(index); // 如果数据来自左边,index 为 0,否则为 1
}
boolean

false

dblclick 2.9.3+

双击时的回调函数。返回的参数如下:

dblclick: function(obj){
  console.log(obj.elem); // 点击的元素
  console.log(obj.data); // 得到点击项的数据
  console.log(obj.index); // 如果数据来自左边,index 为 0,否则为 1

  return false // 返回 false 会阻止穿梭
}
function

null

parseData

数据格式解析的回调函数,用于将返回的任意数据格式解析成 transfer 组件规定的 data 格式
transfer.render({
  elem: '',
  data: [ // 任意数据
    {"id": "1", "name": "李白"},
    {"id": "2", "name": "杜甫"},
    {"id": "3", "name": "贤心"}
  ],
  parseData: function(res){ // 解析成规定的 data 格式
    return {
      "value": res.id, // 数据值
      "title": res.name, // 数据标题
      "disabled": res.disabled,  // 是否禁用
      "checked": res.checked // 是否选中
    };
  }
});