一起遨游网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 52|回复: 0

[前端技巧] 穿梭框组件文档 - layui.transfer

[复制链接]

4

精华

0

钻石

4万

金币

管理员

Rank: 24Rank: 24Rank: 24Rank: 24Rank: 24Rank: 24

积分
45916

官方

发表于 2020-6-23 19:08:06 | 显示全部楼层 |阅读模式
20200623190853.png
代码展示
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>穿梭框组件</title>
  6.   <link rel="stylesheet" href="layui/css/layui.css">
  7. </head>
  8. <body>
  9.         
  10.         
  11.   <div id="test1"></div>
  12.   官方文档位置:https://www.layui.com/doc/modules/transfer.html
  13.   <script src="layui/layui.all.js"></script>
  14.   <script>
  15.   layui.use('transfer', function(){
  16.     var transfer = layui.transfer;
  17.         //前言layui前端的展示效果确实很厉害,不需要前端在写后台的时候自己写功能了,让后端开发者省事,这里只是补充下效果,部分用户可能不是很清晰
  18.         //2组数据我们假设已经转换为系统识别的value 与title,areaid是用来区别放在哪个面 一般情况那后端来适应前端所以前端就应该展现这个效果
  19.         var list1=[
  20.            {"value":"1","areaid": "1-1", "title": "编码001","checked": ""}
  21.             ,{"value":"2","areaid": "1-1", "title": "编码002","checked": ""}
  22.             ,{"value":"3","areaid": "1-1", "title": "编码003","checked": ""}
  23.             ,{"value":"4","areaid": "1-1", "title": "编码004", "disabled": true,"checked": ""}
  24.             ,{"value":"5","areaid": "1-1", "title": "编码005","checked": ""}
  25.             ,{"value":"6","areaid": "1-1", "title": "编码006","checked": ""}
  26.             ,{"value":"7","areaid": "1-1", "title": "编码007","checked": ""}
  27.             ,{"value":"8","areaid": "1-1", "title": "编码008","checked": ""}
  28.         ]
  29.         
  30.         var list2=[
  31.                 {"value":"9","areaid": "2-1", "title": "编码009", "disabled": true}
  32.             ,{"value":"10","areaid": "2-1", "title": "编码010"}
  33.             ,{"value":"11","areaid": "2-1", "title": "编码011"}
  34.             ,{"value":"12","areaid": "2-1", "title": "编码012"}
  35.             ,{"value":"13","areaid": "2-1", "title": "编码013"}
  36.             ,{"value":"14","areaid": "2-1", "title": "编码014", "disabled": true}
  37.             ,{"value":"15","areaid": "2-1", "title": "编码015"}
  38.         ]
  39.         //2组数据合并
  40.         var list = list1.concat(list2);
  41.         let arr=[];
  42.         //用来判断2组数据哪组去右边arr值就是区别的
  43.         for (var i=0;i<list.length;i++) {
  44.                 var x=list[i]['areaid'];
  45.                 if(x=="2-1"){
  46.                         arr.push(
  47.                         list[i]['value']
  48.                         )        
  49.                 }
  50.                
  51.         }
  52.     //渲染
  53.     transfer.render({
  54.       elem: '#test1',//绑定元素
  55.       data: list,//<span style="color: rgb(102, 102, 102); font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;PingFang SC&quot;, Tahoma, Arial, sans-serif; background-color: rgb(242, 242, 242);">数据源</span>
  56.           title:["标题1-1","标题2-1"],//穿梭框上方标题
  57.           value: arr,//<span style="color: rgb(102, 102, 102); font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;PingFang SC&quot;, Tahoma, Arial, sans-serif; background-color: rgba(242, 242, 242, 0.114);">初始选中的数据(右侧列表)</span>
  58.           showSearch:true,
  59.           text: {
  60.             none: '无数据' //没有数据时的文案
  61.             ,searchNone: '无匹配数据' //搜索无匹配数据时的文案
  62.           },
  63.           onchange: function(data, index){//回调
  64.     console.log(data); //得到当前被穿梭的数据  //如果数据来自左边,index 为 0,否则为 1
  65.         if(index==0){
  66.                 console.log("数据来自左边值为:"+data[0]['title']);
  67.         }else{
  68.                 console.log("数据来自有边值为:"+data[0]['title']);
  69.         }
  70.    
  71.   }
  72.       ,id: 'demo1' //定义索引
  73.     });
  74.   });
  75.   </script>
  76. </body>
  77. </html>
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|一起遨游网 ( 苏ICP备15025881号-1 )

GMT+8, 2020-8-9 21:40 , Processed in 0.185687 second(s), 12 queries , File On.

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表