WUI v1.1.0

基础说明

开始使用 Getting Started
底层方法 基础支撑
页面元素 规范 / 公共类
模块规范 使用 / 扩展
常见问题 FAQ
更新日志

页面元素

布局 容器 / 栅格 / 后台布局
颜色 主题色 / 内置背景色
图标 字体图标
动画 内置 CSS3 动画
按钮 button 组
表单 form 元素集合
导航 菜单 / 面包屑
选项卡 Tabs 切换
进度条 progress
面板 折叠 / 手风琴
表格 静态 table
徽章 小圆点 / 小边框
时间线 timeline
区块 引用 / 字段集
文字 颜色 / 链接 / 位置
辅助 边距 / 填充 / 横线等

内置模块

弹出层 layer
日期与时间选择 wdate
分页 wpage
模板引擎 wtpl
数据表格 table
表单 form
文件上传 upload
穿梭框 transfer
树形组件 tree
颜色选择器 colorpicker
常用元素操作 element
滑块 slider
评分 rate
轮播 carousel
流加载 flow
工具集 util
简单编辑器 wedit
富文本编辑器 tinymce
下拉菜单 menu
拖动排序 dragsort
自动完成 autocomplete
代码修饰器 code
通知控件 notice
下拉多选控件 xmSelect
滑块验证 sliderVerify
无限级联选择器 cascader
穿梭框组件 - wui.transfer 更多 transfer 示例

模块加载名称:transfer
transfer 组件可以进行数据的交互筛选
<div id="test1"></div>
<script>
wui.use('transfer', function(){
    var transfer = wui.transfer;

    //渲染
    transfer.render({
      elem: '#test1'  //绑定元素
      ,data: [
        {"value": "1", "title": "李白", "disabled": "", "checked": ""}
        ,{"value": "2", "title": "杜甫", "disabled": "", "checked": ""}
        ,{"value": "3", "title": "小明", "disabled": "", "checked": ""}
      ]
      ,id: 'demo1' //定义索引
    });
});
</script>
目前 transfer 组件提供以下基础参数,可根据需要进行相应的设置
参数选项 说明 类型 默认值
elem 指向容器选择器 String/Object -
title 穿梭框上方标题 Array ['标题一', '标题二']
data 数据源 Array [{}, {}, …]
parseData 用于对数据源进行格式解析 Function 详见数据源格式解析
value 初始选中的数据(右侧列表) Array -
id 设定实例唯一索引,用于基础方法传参使用。 String -
showSearch 是否开启搜索 Boolean false
width 定义左右穿梭框宽度 Number 200
height 定义左右穿梭框高度 Number 340
text 自定义文本,如空数据时的异常提示等。
text: {
  none: '无数据' //没有数据时的文案
  ,searchNone: '无匹配数据' //搜索无匹配数据时的文案
}
              
Object -
onchange 左右数据穿梭时的回调 Function 详见穿梭时的回调
数据格式解析的回调函数,用于将任意数据格式解析成 transfer 组件规定的数据格式,以下是合法的数据格式如下:
[
    {"value": "1", "title": "李白", "disabled": "", "checked": ""}
    ,{"value": "2", "title": "杜甫", "disabled": "", "checked": ""}
    ,{"value": "3", "title": "小明", "disabled": "", "checked": ""}
]
然而很多时候你返回的数据格式可能并不符合规范,比如:
[
    {"id": "1", "name": "李白"}
    ,{"id": "2", "name": "杜甫"}
    ,{"id": "3", "name": "小明"}
]
那么您需要将其解析成 transfer 组件所规定的数据格式:
transfer.render({
  elem: '#text1'
  ,data: [
    {"id": "1", "name": "李白"}
    ,{"id": "2", "name": "杜甫"}
    ,{"id": "3", "name": "小明"}
    ]
  ,parseData: function(res){
    return {
      "value": res.id //数据值
      ,"title": res.name //数据标题
      ,"disabled": res.disabled  //是否禁用
      ,"checked": res.checked //是否选中
    }
  }
});
当数据在左右穿梭时触发,回调返回当前被穿梭的数据
transfer.render({
  elem: '#text'
  ,data: [] //数据源
  ,onchange: function(data, index){
    console.log(data); //得到当前被穿梭的数据
    console.log(index); //如果数据来自左边,index 为 0,否则为 1
  }
});
基础用法是组件关键组成部分,目前所开放的所有方法如下:
var transfer = wui.transfer;

transfer.set(options); //设定全局默认参数。options 即各项基础参数
transfer.getData(id); //获得右侧数据
transfer.reload(id, options); //重载实例
穿梭框的右侧数据通常被认为是选中数据,因此你需要得到它并提交到后台。
transfer.render({
  elem: '#test'
  ,data: []
  ,id: 'demo1' //定义索引
});

//获得右侧数据
var getData = transfer.getData('demo1');
重载一个已经创建的组件实例,被覆盖新的基础属性
transfer.render({
  elem: '#test'
  ,data: []
  ,id: 'demo1' //定义索引
});

 //可以重载所有基础参数
transfer.reload('demo1', {
  title: ['新列表1', '新列表2']
});
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile