layui穿梭框组件

最新推荐文章于 2025-04-03 14:45:11 发布

William.ws

最新推荐文章于 2025-04-03 14:45:11 发布

阅读量2.1k

点赞数

文章标签： javascript LayUI

本文链接：https://blog.youkuaiyun.com/qq_45432593/article/details/107097909

版权

本文详细介绍了layui的transfer组件，用于数据交互筛选。讲解了数据源格式解析，包括基础方法如获取右侧数据和实例重载。示例展示了如何将不规范数据转换为组件所需格式，并提供了基础方法的使用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

本章给大家介绍的layui的穿梭框组件。
transfer 组件可以进行数据的交互筛选：

例：

<!DOCTYPE html>
<html>
<head>  
<meta charset="utf-8">  
<title>穿梭框组件</title>  
<link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>  
<div id="test1"></div>  
<script src="../src/layui.js"></script>  
<script>  layui.use('transfer', function(){
      
 var transfer = layui.transfer;       //渲染    transfer.render({      elem: '#test1'  //绑定元素 
      ,data: [        
      {
   "value": "1", "title": "李白", "disabled": "", "checked": ""}        ,
      {
   "value": "2"