《layui宇宙版教程》：穿梭框组件transfer

最新推荐文章于 2024-05-18 10:32:09 发布
最新推荐文章于 2024-05-18 10:32:09 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： Layui宇宙版教程 文章标签： layui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ghyghost/article/details/108116139
版权

《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：

 

1.26 穿梭框组件transfer

模块加载名称：transfer。

1.26.1 快速使用

transfer组件可以进行数据的交互筛选。

 

　　测试代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div id="test1"></div>

       <script>

           var transfer = layui.transfer;

           //渲染

           transfer.render({

              elem: '#test1' //绑定元素

                  ,

              data: [{

                  "value": "1",

                  "title": "李白",

                  "disabled": "",

                  "checked": ""

              }, {

                  "value": "2",

                  "title": "杜甫",

                  "disabled": "",

                  "checked": ""

              }, {

                  "value": "3",

                  "title": "贤心",

                  "disabled": "",

                  "checked": ""

              }],

              id: 'demo1' //定义索引

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.26.2 基础参数

目前transfer组件提供如图1-xx所示的基础参数，可根据需要进行相应的设置。

 

1.26.3 属性title

    测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div id="test1"></div>

       <script>

           var transfer = layui.transfer;

           //渲染

           transfer.render({

              elem: '#test1', //绑定元素

              title: ['标题1', '标题2'],

              data: [{

                  "value": "1",

                  "title": "李白",

                  "disabled": "",

                  "checked": ""

              }, {

                  "value": "2",

                  "title": "杜甫",

                  "disabled": "",

                  "checked": ""

              }, {

                  "value": "3",

                  "title": "贤心",

                  "disabled": "",

                  "checked": ""

              }],

              id: 'demo1' //定义索引

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

1.26.4 属性value

    测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div id="test1"></div>

       <script>

           var transfer = layui.transfer;

           //渲染

           transfer.render({

              elem: '#test1', //绑定元素

              title: ['标题1', '标题2'],

              data: [{

                  "value": "1",

                  "title": "李白",

                  "disabled": "",

                  "checked": ""

              }, {

                  "value": "2",

                  "title": "杜甫",

                  "disabled": "",

                  "checked": ""

              }, {

                  "value": "3",

                  "title": "贤心",

                  "disabled": "",

                  "checked": ""

              }],

              value: [2, 3],

              id: 'demo1' //定义索引

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

1.26.5 属性showSearch

    测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div id="test1"></div>

       <script>

           var transfer = layui.transfer;

           //渲染

           transfer.render({

              elem: '#test1', //绑定元素

              title: ['标题1', '标题2'],

              showSearch: true,

              data: [{

                  "value": "1",

                  "title": "李白",

                  "disabled": "",

                  "checked": ""

              }, {

                  "value": "2",

                  "title": "杜甫",

                  "disabled": "",

                  "checked": ""

              }, {

                  "value": "3",

                  "title": "贤心",

                  "disabled": "",

                  "checked": ""

              }],

              id: 'demo1' //定义索引

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.26.6 属性width和height

    测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div id="test1"></div>

       <script>

           var transfer = layui.transfer;

           //渲染

           transfer.render({

              elem: '#test1', //绑定元素

              title: ['标题1', '标题2'],

              data: [{

                  "value": "1",

                  "title": "李白",

                  "disabled": "",

                  "checked": ""

              }, {

                  "value": "2",

                  "title": "杜甫",

                  "disabled": "",

                  "checked": ""

              }, {

                  "value": "3",

                  "title": "贤心",

                  "disabled": "",

                  "checked": ""

              }],

              width: 500,

              height: 500,

              id: 'demo1' //定义索引

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.26.7 属性text

    测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div id="test1"></div>

       <script>

           var transfer = layui.transfer;

           //渲染

           transfer.render({

              elem: '#test1', //绑定元素

              title: ['标题1', '标题2'],

              data: [],

               showSearch: true,

              text: {

                  none: '无数据', //没有数据时的文案

                  searchNone: '无匹配数据' //搜索无匹配数据时的文案

              },

              id: 'demo1' //定义索引

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.26.8 属性parseData

数据格式解析的回调函数，用于将任意数据格式解析成transfer组件规定的数据格式，如图1-xx所示的是合法的数据格式。

 

然而很多时候返回的数据格式可能并不符合规范，如图1-xx所示。

 

这时候需要使用属性parseData将其解析成transfer组件所规定的数据格式。

 

    测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div id="test1"></div>

       <script>

           var transfer = layui.transfer;

           //渲染

           transfer.render({

              elem: '#test1', //绑定元素

              title: ['标题1', '标题2'],

              data: [{

                  "id": "1",

                  "name": "李白"

              }, {

                  "id": "2",

                  "name": "杜甫"

              }, {

                  "id": "3",

                  "name": "贤心"

              }],

              parseData: function(res) {

                  return {

                     "value": res.id, //数据值

                     "title": res.name, //数据标题

                     "disabled": res.disabled, //是否禁用

                     "checked": res.checked //是否选中

                  }

              },

              id: 'demo1' //定义索引

           });

       </script>

    </body>

</html>

 

1.26.9 左右穿梭的回调

当数据在左右穿梭时触发，回调返回当前被穿梭的数据。

 

    测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div id="test1"></div>

       <script>

           var transfer = layui.transfer;

           //渲染

           transfer.render({

               elem: '#test1', //绑定元素

              title: ['标题1', '标题2'],

              data: [{

                  "value": "1",

                  "title": "李白",

                  "disabled": "",

                  "checked": ""

              }, {

                  "value": "2",

                  "title": "杜甫",

                  "disabled": "",

                  "checked": ""

              }, {

                  "value": "3",

                  "title": "贤心",

                  "disabled": "",

                  "checked": ""

              }],

              onchange: function(data, index) {

                  console.log(data); //得到当前被穿梭的数据

                  console.log(index); //如果数据来自左边，index为0，否则为s1

              },

              id: 'demo1' //定义索引

           });

       </script>

    </body>

</html>

 

1.26.10 基础方法

目前所开放的所有基础方法如图1-xx所示。

 

1.26.11 获得右侧数据

穿梭框的右侧数据通常被认为是选中数据，因此需要得到它并提交到后台。

 

    测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div id="test1"></div>

       <input type="button" id="mybutton" value="取值" />

       <script>

           var transfer = layui.transfer;

           //渲染

           transfer.render({

              elem: '#test1', //绑定元素

              title: ['标题1', '标题2'],

              data: [{

                  "value": "1",

                  "title": "李白",

                  "disabled": "",

                  "checked": ""

              }, {

                  "value": "2",

                  "title": "杜甫",

                  "disabled": "",

                  "checked": ""

              }, {

                  "value": "3",

                  "title": "贤心",

                  "disabled": "",

                  "checked": ""

              }],

              id: 'demo1' //定义索引

           });

 

           $(document).ready(function() {

              $("#mybutton").click(function() {

                  var getData = transfer.getData('demo1');

                  var test = "test";

              });

 

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.26.12 重载

重载一个已经创建的组件实例，被覆盖新的基础属性。

 

    测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div id="test1"></div>

       <input type="button" id="mybutton" value="重载" />

       <script>

           var transfer = layui.transfer;

           //渲染

           transfer.render({

              elem: '#test1', //绑定元素

              title: ['标题1', '标题2'],

              data: [{

                  "value": "1",

                  "title": "李白",

                  "disabled": "",

                  "checked": ""

              }, {

                  "value": "2",

                  "title": "杜甫",

                  "disabled": "",

                  "checked": ""

              }, {

                  "value": "3",

                  "title": "贤心",

                  "disabled": "",

                  "checked": ""

              }],

              id: 'demo1' //定义索引

           });

 

           $(document).ready(function() {

              $("#mybutton").click(function() {

                  //可以重载所有基础参数

                  transfer.reload('demo1', {

                     title: ['新列表1', '新列表2']

                  });

              });

           });

       </script>

    </body>

</html>

 

立志做一个佳娃~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Transfer 穿梭框
weixin_42517975的博客
04-28 2693
Transfer 的数据通过 data 属性传入。数据需要是一个对象数组，每个对象有以下属性：key 为数据的唯一性标识，label 为显示文本，disabled 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 v-model 的变量，值为数据项的 key 所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为 v-model 绑定的变量赋予一个初...
Ant-Design 中a-transfer穿梭框 组件的使用
PIKapikaaaa的博客
06-29 4512
Ant Design组件中穿梭框（Transfer）的详细使用。解释了每行代码，并赋予案例
Vue学习穿梭框Transfer组件
最新发布
李长渊的博客
05-18 1702
Vue学习穿梭框Transfer组件
layui tansfer(穿梭框组件)
dreamMRs的博客
09-02 1万+
穿梭框自我了解全部 实现代码如下layui.use('transfer',funcation(){ var transfer=layui.transfer; transfer.render({ elem:'test1', data:[ {"value":"1","title":"李白","checked":"checked","disabled":"disabled"}, {"...
Element el-transfer 穿梭框详解
程序员大阳
10-15 1万+
本文目录1. 前言2. 基本用法3. 可搜索4. 自定义标题和按钮的文本5. 设置数据项别名6. 小结 1. 前言 穿梭框就是左右各有一个复选框列表，可以将左侧选中的项目移动到右边，后者将右侧的选中项移回左边的控件。 一般用于物品交接等场景，本篇就来介绍下穿梭框的用法。 2. 基本用法 先看代码： 基本用法:{{value}} <el-transfer v-model="value" :data="preData" @change="selectChange"></el-tran
Element中Transfer 穿梭框的应用
qq_51196135的博客
01-10 2930
1、应用背景 项目中会需要对产品进行选择添加，我们可以用Transfer 穿梭框来实现这一需求。 视图： 2、代码实现 <template> <div class="bigbox"> <div class="topInfo">配置产品</div> <div class="scollbox" style="text-align: center"> <el-transfer st.
layui框架学习（28：穿梭框模块）
gc_2299的博客
06-27 1768
学习并记录layui框架中内置模块的穿梭框模块的函数、参数设置方式。
基于layui实现树形穿梭框
03-18
4. **数据转换**：layui的穿梭框组件默认支持扁平化的数据结构，而我们的数据源是树形结构，所以需要编写一个函数`convertTreeDataToTransfer`，将树形数据转换为穿梭框所需的格式。 5. **自定义样式和事件**：根据...
基于layui实现带搜索功能的树形穿梭框
12-19
穿梭框（Transfer）是一种常见的UI组件，它通常由两个列表组成，用户可以在左侧列表选择元素，然后将其移动到右侧，反之亦然。在这个项目中，layui将这一功能与树形结构结合，增加了层次化的数据展示，同时引入了...
layui 穿梭框transfer右侧数据赋值排序错乱小技巧.doc
05-28
layui 是一个基于JavaScript的前端UI框架，提供了多种实用的UI组件，包括穿梭框transfer。穿梭框transfer是一个常用的控件，用于在两个列表之间移动数据。但是，在实际应用中，我们可能会遇到右侧数据赋值排序错乱的...
layui-表格穿梭-transferTable-源码
10-16
2. **CSS样式**：layui的CSS文件将定义穿梭框及其中元素的外观和布局。这包括列表的宽度、高度、边框、背景色、字体样式等，确保组件与layui整体风格的一致性。 3. **JavaScript逻辑**：JavaScript文件是整个组件的...
layui-表格穿梭-transferTable
12-06
layui的插件效果，优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，...
el-tree-transfer 树形穿梭框
觉醒法师的专栏
12-23 3441
el-tree-transfer是基于vue和element-ui的树形穿梭组件，使用前请确认是否引入element-ui。此组件类似element-ui的transfer组件，该组件分别是Checkbox多选框，Button按钮和Tree树形控件整合页成，在遇到需要树形穿梭功能时，推荐使用！...
写一个穿梭框
mkx2723的博客
06-15 630
目录简单看看el-transfer穿梭框实现思路完整代码 简单看看el-transfer穿梭框 这是一个简单的el-transfer穿梭框，截图自element官网 link 列表1为待选数据，列表2为已选数据，通过选中列表中的数据，点击左移或右移按钮，就可以进行数据的选择和取消选择了。 要注意的是，列表1和列表2的数据其实来源于同一个数组对象，列表1是全部的数据列表，列表2是从列表1中选出来的，这很好理解。但是在实际应用中，有可能需要根据搜索条件的不同，左边的数据是在不断变化的。比如从后台传来的数据要分类
element 自定义处理transfer穿梭框
扬帆前行
06-24 1万+
根据项目需求需要实现可以单选进行选择，并且点击左侧的时候自动添加到右侧中去，代码呈上 传入的参数:isradio=true时为单选模式只能从左侧选一个，为false的时候可进行多选 主页面： <template> <section class="main-content"> <div class="container infor_wrap"...
【Element-UI-穿梭框(Transfer)】
weixin_47416539的博客
04-26 3035
Element-UI-穿梭框(Transfer) 需要获得选中的那项详情，一共有俩个办法： 第一种方法： <el-transfer v-model="quesValues" :titles="['待选试题', '已选试题']" :format="{ noChecked: '${total}', hasChecked: '${checked}/${total}' }" :data="quesData">
element el-transfer穿梭框的使用，自定义穿梭框的数据项
热门推荐
weixin_43128854的博客
03-21 2万+
List item 查看element官方文档可以了解到 el-transfer穿梭框的基本使用方法，本文主要介绍数据项的自定义渲染和右侧列表元素变化时触发方法的实现。 自定义数据项，除了基本的el-transfer使用方法，还需要使用Scoped Slot。 查看官方文档，Transfer 的数据通过 data 属性传入。数据需要是一个对象数组，每个对象有以下属性：key 为数据的唯一性标...
element el-transfer自定义穿梭框的数据项
chengjiayijiu的博客
05-16 1596
通过判断该选项是否在被选数据中来决定是否在数据后显示授权类型，显示是在v-if="formate(option)"决定。两种授权类型点击切换是直接因为transferValue只是存储选中的数据key组成的数组，所以在提交的时候需要循环遍历一下transferData，获取每个用户的信息、授权类型等。
Layui 设置多个穿梭框，并增加上移下移置顶置底功能
Richard_reallife的博客
07-12 5220
Layui 设置多个穿梭框，并增加上移下移置顶置底功能 介绍 针对layui穿梭框进行了一些修改，增加上移下移置顶置底功能，设置了右侧框的排序功能，按序取值，按序加载的功能。 基于layui 2.5.4 ，致敬贤心大神。 样式 源码 <!DOCTYPE HTML> <%@ page contentType="text/html; charset=UTF-8" pageEncod...
layui 穿梭框数据交互
04-03
layui 穿梭框（Transfer）是一个用于在两个列表之间移动数据的组件。它可以通过前后端的交互来获取和更新数据。下面是两种实现数据交互的方法： 1. 后端获取数据：通过后端接口获取数据，并将数据传递给穿梭框组件。在后端，你可以使用任何你熟悉的编程语言和框架来实现数据的获取和处理。在前端，你需要使用 layui 的穿梭框组件，并通过 AJAX 请求将数据传递给后端接口。具体的实现步骤如下： - 在前端页面中，创建一个 div 元素，并设置一个唯一的 id，用于放置穿梭框组件。 - 在后端，创建一个接口用于获取数据。你可以使用任何你熟悉的后端框架来实现这个接口。 - 在前端的 JavaScript 代码中，使用 layui 的穿梭框组件，并通过 AJAX 请求将数据传递给后端接口。 - 在后端接口中，获取请求中的数据，并进行相应的处理。然后将处理后的数据返回给前端。 - 在前端的 JavaScript 代码中，接收后端返回的数据，并将数据传递给穿梭框组件进行展示。 以下是一个示例代码： ```html <div id="test4" class="demo-transfer"></div> ``` ```javascript layui.use(['transfer'], function(){ var transfer = layui.transfer; // 通过 AJAX 请求获取数据 $.ajax({ url: 'your_backend_api_url', type: 'GET', success: function(res){ // 将数据传递给穿梭框组件 transfer.render({ elem: '#test4', data: res.data // 假设后端返回的数据为 {data: []} }); } }); }); ``` 2. 前端获取数据：在前端页面中，你可以直接定义一个数组来存储数据，并将数据传递给穿梭框组件。具体的实现步骤如下： - 在前端页面中，创建一个 div 元素，并设置一个唯一的 id，用于放置穿梭框组件。 - 在前端的 JavaScript 代码中，定义一个数组来存储数据，并将数据传递给穿梭框组件进行展示。 以下是一个示例代码： ```html <div id="test4" class="demo-transfer"></div> ``` ```javascript layui.use(['transfer'], function(){ var transfer = layui.transfer; // 定义数据数组 var data = [ {value: '1', title: '选项1'}, {value: '2', title: '选项2'}, {value: '3', title: '选项3'} ]; // 将数据传递给穿梭框组件 transfer.render({ elem: '#test4', data: data }); }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值