來源於 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>