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>

标签:

微信扫一扫二维码访问


16年前端经验
加微信好友直接沟通
了解《我的十年》