Layui组件: transfer穿梭框

定义穿梭框容器

<div id="transferDiv" style="width: 600px;height: 400px;"></div>

 

加载transfer模块

layui.use(['transfer','layer'],function(){
        var transfer = layui.transfer;

        // disabled: 表明该条数据禁用
        var data1 = [
            {"title": "李白", "value": "1"}
            ,{"value": "2", "title": "杜甫"}
            ,{"value": "3", "title": "苏轼"}
            ,{"value": "4", "title": "李清照"}
            ,{"value": "5", "title": "鲁迅", "disabled": true}
            ,{"value": "6", "title": "巴金"}
            ,{"value": "7", "title": "冰心"}
            ,{"value": "8", "title": "矛盾"}
            ,{"value": "9", "title": "贤心"}
        ]
 
        <!--
            将data1数据渲染到穿梭框
            render():
                elem:  声明的容器ID
                data:  穿梭框所需渲染的数据,
                title: 左右两处选择框的标题,
                id:    该穿梭框的唯一标识,
                showSearch: 是否开启搜索功能

            reload():
                //需指定穿梭框的唯一标识
                value: 展示在右侧的数据
        -->
        transfer.render({
            elem:"#transferDiv",
            data:data1,
            title:['列表一','列表二'],
            id:"indexId",
            showSearch:true
        })
        transfer.reload('indexId',{
            value: ['2','7']
        })
    })

 

 

获取右侧数据
 

var data = transfer.getData('indexId')  //穿梭框唯一标识

data结果:
[
    {value: "2", title: "杜甫"},
    {value: "7", title: "冰心"}
]

 

注意: 是否需要解析数据源

合法的穿梭框数据格式:
[
  {"value": "1", "title": "李白", "disabled": "", "checked": ""},
  {"value": "2", "title": "杜甫", "disabled": "", "checked": ""},
  {"value": "3", "title": "贤心", "disabled": "", "checked": ""}
]


不规范的数据格式需使用parseData进行解析转换:
[
  {"id": "1", "name": "李白"},
  {"id": "2", "name": "杜甫"},
  {"id": "3", "name": "贤心"}
]

transfer.render({
  elem: '#transferDiv',
  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 //是否选中
    }
  }
});