<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layUI穿梭框</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="../../../layui/css/layui.css" media="all" /> <!-- 注意：如果你直接复制所有代码到本地，上述 css 路径需要改成你本地的 --> </head> <body> <div class="layui-btn-container"> <button type="button" class="layui-btn" lay-demotransferactive="getData">获取右侧数据</button> </div> <div id="test7" class="demo-transfer"></div> </body> <script src="../../../layui/layui.js"></script> <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 --> <script> layui.use(['transfer', 'layer', 'util'], function(){ var $ = layui.$ ,transfer = layui.transfer ,layer = layui.layer ,util = layui.util; //模拟数据 var data1 = [ {"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": "贤心"} ] var data2 = ['6','7'] //实例调用 transfer.render({ elem: '#test7' ,data: data1 ,id: 'key123' //定义唯一索引 ,width: 300 //定义宽度 ,height: 500 //定义高度 ,title: ['显示','不显示'] , value: data2 //右侧数据直接初始化 ,onchange: function(data, index){ console.log(data,'63'); //得到当前被穿梭的数据 console.log(index,'64'); //如果数据来自左边，index 为 0，否则为 1 中间按钮点击事件 var arrD = new Array(); $.each(data, function(k, v) { arrD.push(v.title); }); var name = arrD.join(','); console.log(name,'70') } // , value: ["18", "3"] //右侧数据直接初始化 }) //批量办法定事件 util.event('lay-demoTransferActive', { getData: function(othis){ var getData = transfer.getData('key123'); //获取右侧数据 layer.alert(JSON.stringify(getData)); console.log(JSON.stringify(getData),'55'); console.log(getData,'55'); } }); }); </script> </html>
