2022年10月19日
layui穿梭组件layui.transfer获取数据方法
两组数据之间的穿梭效果，你一定见到过，用jquery手写太麻烦，不如试试layui自带组件一气呵成，不过需要了解它内置的一些方法，比如如果获取数据，layui穿梭组件layui.transfer获取数据方法，附代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>穿梭框组件</title>
<link rel=”stylesheet” href=”../src/css/layui.css”>
</head>
<body>
<div id=”test1″></div>
<button>获取右侧数据</button>
<script src=”../src/layui.js”></script>
<script>
layui.use(‘transfer’, function(){
var transfer = layui.transfer;
//渲染
transfer.render({
elem: ‘#test1’
,title: [‘候选文人’, ‘获奖文人’]
,data: [
{“value”: “1”, “title”: “李白”}
,{“value”: “2”, “title”: “杜甫”}
,{“value”: “3”, “title”: “苏轼”}
,{“value”: “4”, “title”: “李清照”, “checked” : true}
,{“value”: “5”, “title”: “鲁迅”, “disabled”: true}
,{“value”: “6”, “title”: “巴金”}
,{“value”: “7”, “title”: “冰心”}
,{“value”: “8”, “title”: “矛盾”}
,{“value”: “9”, “title”: “贤心”}
]
,id: ‘demo1’
}
});
var getData = transfer.getData(‘demo1’);
$(“button”).click(function(){
alert(getData )
})
});
</script>
</body>
</html>
标签：layui
关注“qietuwang”微信公众号，获取一手干货内容推送
本文由切图网原创，转载请保留版权：
layui穿梭组件layui.transfer获取数据方法
http://www.qietu.com/layui-transfer-huoqu-shuju/
微信扫一扫二维码访问
