来源于 https://www.layui.com/demo/transfer.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Layui</title> 6 <meta name="renderer" content="webkit"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 8 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 9 <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all"> 10 <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --> 11 </head> 12 <body> 13 14 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> 15 <legend>基础效果</legend> 16 </fieldset> 17 18 <div id="test1" class="demo-transfer"></div> 19 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> 20 <legend>定义标题及数据源</legend> 21 </fieldset> 22 23 <div id="test2" class="demo-transfer"></div> 24 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> 25 <legend>初始右侧数据集合</legend> 26 </fieldset> 27 28 <div id="test3" class="demo-transfer"></div> 29 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> 30 <legend>显示搜索框</legend> 31 </fieldset> 32 33 <div id="test4" class="demo-transfer"></div> 34 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> 35 <legend>数据格式解析</legend> 36 </fieldset> 37 38 <div id="test5" class="demo-transfer"></div> 39 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> 40 <legend>穿梭时的回调</legend> 41 </fieldset> 42 43 <div id="test6" class="demo-transfer"></div> 44 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> 45 <legend>实例调用</legend> 46 </fieldset> 47 <div class="layui-btn-container"> 48 <button type="button" class="layui-btn" lay-demotransferactive="getData">获取右侧数据</button> 49 <button type="button" class="layui-btn" lay-demotransferactive="reload">重载实例</button> 50 </div> 51 52 <div id="test7" class="demo-transfer"></div> 53 54 55 56 <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script> 57 <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> 58 <script> 59 layui.use(['transfer', 'layer', 'util'], function(){ 60 var $ = layui.$ 61 ,transfer = layui.transfer 62 ,layer = layui.layer 63 ,util = layui.util; 64 65 //模拟数据 66 var data1 = [ 67 {"value": "1", "title": "李白"} 68 ,{"value": "2", "title": "杜甫"} 69 ,{"value": "3", "title": "苏轼"} 70 ,{"value": "4", "title": "李清照"} 71 ,{"value": "5", "title": "鲁迅", "disabled": true} 72 ,{"value": "6", "title": "巴金"} 73 ,{"value": "7", "title": "冰心"} 74 ,{"value": "8", "title": "矛盾"} 75 ,{"value": "9", "title": "贤心"} 76 ] 77 78 ,data2 = [ 79 {"value": "1", "title": "瓦罐汤"} 80 ,{"value": "2", "title": "油酥饼"} 81 ,{"value": "3", "title": "炸酱面"} 82 ,{"value": "4", "title": "串串香", "disabled": true} 83 ,{"value": "5", "title": "豆腐脑"} 84 ,{"value": "6", "title": "驴打滚"} 85 ,{"value": "7", "title": "北京烤鸭"} 86 ,{"value": "8", "title": "烤冷面"} 87 ,{"value": "9", "title": "毛血旺", "disabled": true} 88 ,{"value": "10", "title": "肉夹馍"} 89 ,{"value": "11", "title": "臊子面"} 90 ,{"value": "12", "title": "凉皮"} 91 ,{"value": "13", "title": "羊肉泡馍"} 92 ,{"value": "14", "title": "冰糖葫芦", "disabled": true} 93 ,{"value": "15", "title": "狼牙土豆"} 94 ] 95 96 //基础效果 97 transfer.render({ 98 elem: '#test1' 99 ,data: data1 100 }) 101 102 //定义标题及数据源 103 transfer.render({ 104 elem: '#test2' 105 ,title: ['候选文人', '获奖文人'] //自定义标题 106 ,data: data1 107 //,width: 150 //定义宽度 108 ,height: 210 //定义高度 109 }) 110 111 //初始右侧数据 112 transfer.render({ 113 elem: '#test3' 114 ,data: data2 115 ,value: ["1", "3", "5", "7", "9", "11"] 116 }) 117 118 //显示搜索框 119 transfer.render({ 120 elem: '#test4' 121 ,data: data1 122 ,title: ['文本墨客', '获奖文人'] 123 ,showSearch: true 124 }) 125 126 //数据格式解析 127 transfer.render({ 128 elem: '#test5' 129 ,parseData: function(res){ 130 return { 131 "value": res.id //数据值 132 ,"title": res.name //数据标题 133 ,"disabled": res.disabled //是否禁用 134 ,"checked": res.checked //是否选中 135 } 136 } 137 ,data: [ 138 {"id": "1", "name": "李白"} 139 ,{"id": "2", "name": "杜甫"} 140 ,{"id": "3", "name": "贤心"} 141 ] 142 ,height: 150 143 }) 144 145 //穿梭时的回调 146 transfer.render({ 147 elem: '#test6' 148 ,data: data1 149 ,onchange: function(obj, index){ 150 var arr = ['左边', '右边']; 151 layer.alert('来自 <strong>'+ arr[index] + '</strong> 的数据：'+ JSON.stringify(obj)); //获得被穿梭时的数据 152 } 153 }) 154 155 //实例调用 156 transfer.render({ 157 elem: '#test7' 158 ,data: data1 159 ,id: 'key123' //定义唯一索引 160 }) 161 //批量办法定事件 162 util.event('lay-demoTransferActive', { 163 getData: function(othis){ 164 var getData = transfer.getData('key123'); //获取右侧数据 165 layer.alert(JSON.stringify(getData)); 166 } 167 ,reload:function(){ 168 //实例重载 169 transfer.reload('key123', { 170 title: ['文人', '喜欢的文人'] 171 ,value: ['2', '5', '9'] 172 ,showSearch: true 173 }) 174 } 175 }); 176 177 }); 178 </script> 179 180 </body> 181 </html>