穿梭框组件

  <div id="ID-transfer-demo"></div>
<script>
layui.use(function(){
  var transfer = layui.transfer;
  // 数据
  var data = [
    {"value": "1", "title": "李白"},
    {"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": "贤心"}
  ];
  // 渲染
  transfer.render({
    elem: '#ID-transfer-demo',
    data: data
  });
});
</script>
  

定义标题及数据源

  <div id="ID-transfer-demo-title"></div>
<script>
layui.use(function(){
  var transfer = layui.transfer;
  // 数据
  var data = [
    {"value": "1", "title": "李白"},
    {"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": "贤心"}
  ];
  // 渲染
  transfer.render({
    elem: '#ID-transfer-demo-title',
    title: ['候选文人', '获奖文人'],  //自定义标题
    data: data,
    // width: 150, // 定义宽度
    height: 210 // 定义高度
  });
});
</script>
  

初始右侧数据

  <div id="ID-transfer-demo-value"></div>
<script>
layui.use(function(){
  var transfer = layui.transfer;
  // 数据
  var data = [
    {"value": "1", "title": "瓦罐汤"},
    {"value": "2", "title": "油酥饼"},
    {"value": "3", "title": "炸酱面"},
    {"value": "4", "title": "串串香", "disabled": true},
    {"value": "5", "title": "豆腐脑"},
    {"value": "6", "title": "驴打滚"},
    {"value": "7", "title": "北京烤鸭"},
    {"value": "8", "title": "烤冷面"},
    {"value": "9", "title": "毛血旺", "disabled": true},
    {"value": "10", "title": "肉夹馍"},
    {"value": "11", "title": "臊子面"},
    {"value": "12", "title": "凉皮"},
    {"value": "13", "title": "羊肉泡馍"},
    {"value": "14", "title": "冰糖葫芦", "disabled": true},
    {"value": "15", "title": "狼牙土豆"}
  ];
  // 渲染
  transfer.render({
    elem: '#ID-transfer-demo-value',
    data: data,
    value: ["1", "3", "5", "7", "9", "11"]
  });
});
</script>
  

显示搜索框

  <div id="ID-transfer-demo-showSearch"></div>
<script>
layui.use(function(){
  var transfer = layui.transfer;
  // 数据
  var data = [
    {"value": "1", "title": "李白"},
    {"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": "贤心"}
  ];
  // 渲染
  transfer.render({
    elem: '#ID-transfer-demo-showSearch',
    data: data,
    title: ['文本墨客', '获奖文人'],
    showSearch: true
  });
});
</script>
  

数据格式解析

  <div id="ID-transfer-demo-parseData"></div>
<script>
layui.use(function(){
  var transfer = layui.transfer;
  // 渲染
  transfer.render({
    elem: '#ID-transfer-demo-parseData',
    parseData: function(res){
      return {
        "value": res.id, // 数据值
        "title": res.name, // 数据标题
        "disabled": res.disabled,  // 是否禁用
        "checked": res.checked // 是否选中
      }
    },
    data: [
      {"id": "1", "name": "李白"},
      {"id": "2", "name": "杜甫"},
      {"id": "3", "name": "苏轼"}
    ],
    height: 150
  });
});
</script>
  

穿梭时的回调

  <div id="ID-transfer-demo-onchange"></div>
<script>
layui.use(function(){
  var transfer = layui.transfer;
  var layer = layui.layer;
  // 数据
  var data = [
    {"value": "1", "title": "李白"},
    {"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": "贤心"}
  ];
  // 渲染
  transfer.render({
    elem: '#ID-transfer-demo-onchange',
    data: data,
    onchange: function(obj, index){
      var arr = ['左边', '右边'];
       // 查看被穿梭时的数据 --  仅用于演示
      layer.alert('来自 <strong>'+ arr[index] + '</strong> 的数据：'+ JSON.stringify(obj));
    }
  });
});
</script>
  

实例调用

  <div class="layui-btn-container">
  <button type="button" class="layui-btn" lay-on="getData">获取右侧数据</button>
  <button type="button" class="layui-btn" lay-on="reload">重载实例</button>
</div>
<div id="ID-transfer-demo-inst"></div>
<script>
layui.use(function(){
  var transfer = layui.transfer;
  var util = layui.util;
  var layer = layui.layer;
  // 数据
  var data = [
    {"value": "1", "title": "李白"},
    {"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": "贤心"}
  ];
  // 渲染
  transfer.render({
    elem: '#ID-transfer-demo-inst',
    data: data,
    id: 'demo-inst' // 定义唯一索引
  });
  // 批量事件
  util.on('lay-on', {
    getData: function(othis){
      var getData = transfer.getData('demo-inst'); // 获取右侧数据
      layer.alert(JSON.stringify(getData)); 
    },
    reload:function(){
      //实例重载
      transfer.reload('demo-inst', {
        title: ['文人', '喜欢的文人'],
        value: ['2', '5', '9'],
        showSearch: true
      })
    }
  });
});
</script>