【无标题】

最新推荐文章于 2024-07-20 18:05:54 发布

m0_72494612

最新推荐文章于 2024-07-20 18:05:54 发布

阅读量28

点赞数

文章标签：笔记

原文链接：https://www.layui.site/demo/transfer.html

版权

<!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="../../res/layui/dist/css/layui.css" tppabs="https://www.layui.site/layui/dist/css/layui.css" media="all">

</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>基础效果</legend>
</fieldset>

<div id="test1" class="demo-transfer"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>定义标题及数据源</legend>
</fieldset>

<div id="test2" class="demo-transfer"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>初始右侧数据集合</legend>
</fieldset>

<div id="test3" class="demo-transfer"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>显示搜索框</legend>
</fieldset>

<div id="test4" class="demo-transfer"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>数据格式解析</legend>
</fieldset>

<div id="test5" class="demo-transfer"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>穿梭时的回调</legend>
</fieldset>

<div id="test6" class="demo-transfer"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>实例调用</legend>
</fieldset>
<div class="layui-btn-container">
<button type="button" class="layui-btn" lay-demotransferactive="getData">获取右侧数据</button>
<button type="button" class="layui-btn" lay-demotransferactive="reload">重载实例</button>
</div>

<div id="test7" class="demo-transfer"></div>



<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>

<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": "贤心"}
]

,data2 = [
{"value": "1", "title": "瓦罐汤"}
,{"value": "2", "title": "油酥饼"}
,{"value": "3", "title": "炸酱面"}
,{"value": "4", "title": "串串香", "disabled": true}
,{"value": "5", "title": "豆腐脑"}
,{"value": "6", "title": "驴打滚"}
,{"value": "7", "title": "北京烤鸭"}
,{"value": "8", "title": "烤冷面"}
,{"value": "9", "title": "毛血旺", "disabled": true}
,{"value": "10", "title": "肉夹馍"}
,{"value": "11", "title": "臊子面"}
,{"value": "12", "title": "凉皮"}
,{"value": "13", "title": "羊肉泡馍"}
,{"value": "14", "title": "冰糖葫芦", "disabled": true}
,{"value": "15", "title": "狼牙土豆"}
]

//基础效果
transfer.render({
elem: '#test1'
,data: data1
})

//定义标题及数据源
transfer.render({
elem: '#test2'
,title: ['候选文人', '获奖文人'] //自定义标题
,data: data1
//,width: 150 //定义宽度
,height: 210 //定义高度
})

//初始右侧数据
transfer.render({
elem: '#test3'
,data: data2
,value: ["1", "3", "5", "7", "9", "11"]
})

//显示搜索框
transfer.render({
elem: '#test4'
,data: data1
,title: ['文本墨客', '获奖文人']
,showSearch: true
})

//数据格式解析
transfer.render({
elem: '#test5'
,parseData: function(res){
return {
"value": res.id //数据值
,"title": res.name //数据标题
,"disabled": res.disabled //是否禁用
,"checked": res.checked //是否选中
}
}
,data: [
{"id": "1", "name": "李白"}
,{"id": "2", "name": "杜甫"}
,{"id": "3", "name": "贤心"}
]
,height: 150
})

//穿梭时的回调
transfer.render({
elem: '#test6'
,data: data1
,onchange: function(obj, index){
var arr = ['左边', '右边'];
layer.alert('来自 <strong>'+ arr[index] + '</strong> 的数据：'+ JSON.stringify(obj)); //获得被穿梭时的数据
}
})

//实例调用
transfer.render({
elem: '#test7'
,data: data1
,id: 'key123' //定义唯一索引
})
//批量办法定事件
util.event('lay-demoTransferActive', {
getData: function(othis){
var getData = transfer.getData('key123'); //获取右侧数据
layer.alert(JSON.stringify(getData));
}
,reload:function(){
//实例重载
transfer.reload('key123', {
title: ['文人', '喜欢的文人']
,value: ['2', '5', '9']
,showSearch: true
})
}
});

});
</script>

</body>
</html>

m0_72494612

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【无标题】

/获得被穿梭时的数据。,{"value": "14", "title": "冰糖葫芦", "disabled": true},{"value": "4", "title": "串串香", "disabled": true},{"value": "9", "title": "毛血旺", "disabled": true},{"value": "5", "title": "鲁迅", "disabled": true},{"value": "4", "title": "李清照"}
复制链接

扫一扫