1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
| <!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>
| body{padding: 100px;}
| #text1,#text2{padding-bottom: 60px;}
| </style>
| </head>
| <body>
|
| <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>
|
|
| <div id="text1"></div>
|
|
| <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>
|
| <div id="text3"></div>
|
|
| <script src="../src/layui.js"></script>
| <script>
| layui.use(['transfer', 'util'], function(){
| var $ = layui.$
| ,transfer = layui.transfer
| ,util = layui.util;
|
| var ins1 = transfer.render({
| elem: '#text1'
| ,title: ['候选文人', '获奖文人']
| ,data: [
| {"value": "1", "title": "李白"}
| ,{"value": "2", "title": "杜甫"}
| ,{"value": "3", "title": "贤心"}
| ,{"value": "4", "title": "鲁迅", "disabled": true}
| ,{"value": "5", "title": "巴金"}
| ,{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "Bbb"},{"value": "6", "title": "BB"},{"value": "6", "title": "Aa"},{"value": "6", "title": "aa"}
| ]
| ,id: 'demoId'
| ,value: ["2", "3"]
| ,showSearch: true // 若区分大小写，设置 'cs'
| });
|
| //按钮事件
| util.event('lay-demo', {
| getData: function(othis){
| alert(JSON.stringify(ins1.getData()))
| }
| ,reload: function(){
| transfer.reload('demoId', {
| value: ["6"]
| //,data: [{"value": "1", "title": "李白"}]
| });
| }
| });
|
| var ins2 = transfer.render({
| elem: '#text2'
| ,showSearch: true
| ,onchange: function(obj){
| console.log(obj)
| }
| ,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"]
| });
| });
| </script>
|
| </body>
| </html>
|
|
