2019-05-31 14:36:29 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
|
|
<title>穿梭框</title>
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../src/css/layui.css">
|
|
|
|
|
<style>
|
2019-06-04 02:58:36 +08:00
|
|
|
body{padding: 100px;}
|
2019-06-06 12:19:43 +08:00
|
|
|
#text1,#text2{padding-bottom: 60px;}
|
2019-05-31 14:36:29 +08:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
2019-06-04 02:58:36 +08:00
|
|
|
<div class="layui-btn-container">
|
|
|
|
|
<button type="button" class="layui-btn" lay-demo="getData">获取右侧数据</button>
|
|
|
|
|
<button type="button" class="layui-btn" lay-demo="reload">重载实例</button>
|
|
|
|
|
</div>
|
2019-06-06 12:19:43 +08:00
|
|
|
|
|
|
|
|
|
2019-05-31 14:36:29 +08:00
|
|
|
<div id="text1"></div>
|
|
|
|
|
|
2019-06-06 12:19:43 +08:00
|
|
|
|
|
|
|
|
<div class="layui-form">
|
|
|
|
|
<div class="layui-form-item">
|
|
|
|
|
<label class="layui-form-label">职位</label>
|
|
|
|
|
<div class="layui-input-block">
|
|
|
|
|
<div id="text2"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2019-05-31 14:36:29 +08:00
|
|
|
|
|
|
|
|
<div id="text3"></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="../src/layui.js"></script>
|
|
|
|
|
<script>
|
2019-06-04 02:58:36 +08:00
|
|
|
layui.use(['transfer', 'util'], function(){
|
|
|
|
|
var $ = layui.$
|
|
|
|
|
,transfer = layui.transfer
|
|
|
|
|
,util = layui.util;
|
2019-05-31 14:36:29 +08:00
|
|
|
|
|
|
|
|
var ins1 = transfer.render({
|
|
|
|
|
elem: '#text1'
|
2019-06-04 02:58:36 +08:00
|
|
|
,title: ['候选文人', '获奖文人']
|
|
|
|
|
,data: [
|
|
|
|
|
{"value": "1", "title": "李白"}
|
|
|
|
|
,{"value": "2", "title": "杜甫"}
|
|
|
|
|
,{"value": "3", "title": "贤心"}
|
|
|
|
|
,{"value": "4", "title": "鲁迅", "disabled": true}
|
|
|
|
|
,{"value": "5", "title": "巴金"}
|
2020-11-26 22:12:46 +08:00
|
|
|
,{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"}
|
2019-06-04 02:58:36 +08:00
|
|
|
]
|
2019-06-06 12:19:43 +08:00
|
|
|
,id: 'demoId'
|
2019-06-04 02:58:36 +08:00
|
|
|
,value: ["2", "3"]
|
2019-05-31 14:36:29 +08:00
|
|
|
,showSearch: true
|
|
|
|
|
});
|
|
|
|
|
|
2019-06-04 02:58:36 +08:00
|
|
|
//按钮事件
|
|
|
|
|
util.event('lay-demo', {
|
|
|
|
|
getData: function(othis){
|
|
|
|
|
alert(JSON.stringify(ins1.getData()))
|
|
|
|
|
}
|
2019-06-06 12:19:43 +08:00
|
|
|
,reload: function(){
|
|
|
|
|
transfer.reload('demoId', {
|
|
|
|
|
value: ["6"]
|
2021-03-31 14:07:23 +08:00
|
|
|
//,data: [{"value": "1", "title": "李白"}]
|
2019-06-06 12:19:43 +08:00
|
|
|
});
|
|
|
|
|
}
|
2019-05-31 14:36:29 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var ins2 = transfer.render({
|
|
|
|
|
elem: '#text2'
|
2019-06-06 12:19:43 +08:00
|
|
|
,showSearch: true
|
2019-05-31 14:36:29 +08:00
|
|
|
,onchange: function(obj){
|
|
|
|
|
console.log(obj)
|
|
|
|
|
}
|
2019-06-04 02:58:36 +08:00
|
|
|
,parseData: function(res){
|
|
|
|
|
return {
|
|
|
|
|
"value": res.id
|
|
|
|
|
,"title": res.label
|
|
|
|
|
,"disabled": res.disabled
|
|
|
|
|
,"checked": res.checked
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
,data: [
|
|
|
|
|
{"id": "1", "label": "瓦罐汤"}
|
|
|
|
|
,{"id": "2", "label": "油酥饼"}
|
|
|
|
|
,{"id": "3", "label": "炸酱面"}
|
|
|
|
|
,{"id": "4", "label": "串串香", "disabled": true}
|
|
|
|
|
,{"id": "5", "label": "豆腐脑"}
|
|
|
|
|
,{"id": "6", "label": "驴打滚"}
|
|
|
|
|
]
|
|
|
|
|
,value: ["1", "5"]
|
2019-05-31 14:36:29 +08:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
