Js穿梭框实现

JS穿梭框（Transfer）是一种常见的UI组件，主要用于在两个列表之间移动数据项。以下是关于JS穿梭框的一些基础概念、优势、类型、应用场景以及常见问题及其解决方法。

基础概念

穿梭框通常由两个列表（源列表和目标列表）和一个操作区域组成。用户可以选择源列表中的某些项，并通过点击“添加”按钮将它们移动到目标列表中，反之亦然。

优势

直观易用：用户可以直观地看到数据项在不同列表之间的移动。
高效：快速完成数据的分类和转移。
灵活性：适用于多种场景，如权限管理、数据分类等。

类型

基础穿梭框：简单的两个列表之间的数据移动。
带搜索功能的穿梭框：可以在列表中进行搜索，提高查找效率。
带分组功能的穿梭框：数据项可以按组分类，便于管理。

应用场景

权限管理：将用户分配到不同的权限组。
数据分类：将数据项从一个类别移动到另一个类别。
商品选择：在电商平台上，用户可以从多个商品列表中选择心仪的商品。

常见问题及解决方法

问题1：穿梭框数据不同步

原因：可能是由于数据更新后没有及时同步到另一个列表。 解决方法：确保在数据移动后，及时更新两个列表的数据源。

function moveItem(sourceList, targetList, item) {
    const index = sourceList.indexOf(item);
    if (index > -1) {
        sourceList.splice(index, 1);
        targetList.push(item);
    }
}

问题2：穿梭框在选择项时出现重复

原因：可能是由于数据源中没有去重处理。 解决方法：在添加到目标列表前，检查目标列表中是否已存在该项。

function addItem(sourceList, targetList, item) {
    if (!targetList.includes(item)) {
        targetList.push(item);
        const index = sourceList.indexOf(item);
        if (index > -1) {
            sourceList.splice(index, 1);
        }
    }
}

问题3：穿梭框在大数据量时性能较差

原因：大量的DOM操作导致性能下降。 解决方法：使用虚拟列表技术，只渲染可见区域的数据项，减少DOM操作。

// 示例代码略，可以使用第三方库如react-virtualized或vue-virtual-scroller

示例代码

以下是一个简单的穿梭框实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS穿梭框示例</title>
    <style>
        .list {
            display: inline-block;
            width: 200px;
            height: 300px;
            border: 1px solid #ccc;
            overflow-y: auto;
            margin-right: 10px;
        }
        .item {
            padding: 5px;
            border-bottom: 1px solid #eee;
        }
    </style>
</head>
<body>
    <div class="list" id="sourceList">
        <div class="item" onclick="selectItem(this)">Item 1</div>
        <div class="item" onclick="selectItem(this)">Item 2</div>
        <!-- 更多项 -->
    </div>
    <div>
        <button onclick="moveToTarget()">添加</button>
        <button onclick="moveToSource()">移除</button>
    </div>
    <div class="list" id="targetList">
        <!-- 目标列表项 -->
    </div>

    <script>
        let selectedItems = [];

        function selectItem(item) {
            item.style.backgroundColor = '#f0f0f0';
            selectedItems.push(item.textContent);
        }

        function moveToTarget() {
            const sourceList = document.getElementById('sourceList');
            const targetList = document.getElementById('targetList');
            selectedItems.forEach(item => {
                if (!targetList.textContent.includes(item)) {
                    const div = document.createElement('div');
                    div.className = 'item';
                    div.textContent = item;
                    targetList.appendChild(div);
                    sourceList.removeChild(sourceList.querySelector(`.item:nth-child(${Array.from(sourceList.children).indexOf(item) + 1})`));
                }
            });
            selectedItems = [];
        }

        function moveToSource() {
            // 类似逻辑，移除目标列表项并添加到源列表
        }
    </script>
</body>
</html>

这个示例展示了如何实现一个简单的穿梭框，包括基本的添加和移除功能。实际应用中，可以根据需求进行扩展和优化。

页面内容是否对你有帮助？

有帮助

没帮助

wxPython中的穿梭控制

、

我正尝试在wxPython中实现一个穿梭控件，但似乎没有。我决定使用两个listbox控件。穿梭控件如下所示：谢谢。

浏览 0提问于2010-05-20得票数 0

回答已采纳

1回答

Oracle Apex列表管理器/列表控件？

、、

据我所知，Apex中唯一的“列表框”-type控件是List Manager和Shuttle。似乎也不能工作。穿梭类的工作，但只显示一个值，或仅在左侧的值。你能提供一个如何正确设置它的例子吗？不管是两边的穿梭机还是名单管理员...

浏览 0提问于2011-12-02得票数 2

回答已采纳

1回答

Oracle /SQL进程在m:m关系的关联表中插入多个选择项，悄然失败。

、、

我正在实现一个表格，允许最终用户创建一个新的项目。此表单包含一个穿梭机，允许用户选择项目所属的处置站点(1+)。我想使用穿梭值的输出来填充项目和处置站点之间的关联表，这是一个多到多的关系。到目前为止，这是我的做法：在projects表中创建了一个额外的VARCHAR2(4000)来存储穿梭输出(称为“穿梭”)。本专栏中的穿梭输出类似于'CA-AT-D109Z2:CA-AT-D115:CA-AT-D174Z2'.Created，这是一个基于“：”独立的进程，然后使用P

浏览 4提问于2022-11-16得票数 0

2回答

使用RegEx删除空行

、、、

let txt = `「呀啊，居然能見到比自己還年輕的母親，時空穿梭真是恐怖呀」「呀啊，居然能見到比自己還年輕的母親，時空穿梭真是恐怖呀」有人知道regex的哪一部分是错的吗？还是这是(?<=)限制？，時空穿梭真是恐怖呀」预期

浏览 1提问于2019-08-09得票数 0

1回答

您是否可以使用文本框向Oracle APEX Shuttle项添加值？

、

LHS仍然使用查询动态填充，但是如果它没有您想要的值，那么您只需在文本框中键入一个值，然后将其添加到穿梭的RHS中(并在提交时更新数据库中的相应表)。

浏览 0提问于2009-07-24得票数 2

1回答

如何限制用户只输入特定的单词

、、

在我的输入textField程序中，我希望用户能够从列表中只输入几个特定的单词，这样做最好的方法是什么？

浏览 3提问于2013-09-18得票数 0

回答已采纳

3回答

JDeveloper和ADF查看条件

、

现在，我可以创建视图条件，但我的所有搜索字段都显示为纯文本输入框。实际上，我希望其中一个显示为下拉列表，另一个显示为“选择多个穿梭”组件。

浏览 1提问于2013-05-30得票数 1

回答已采纳

1回答

用烧瓶交换巨蟒与棱角的数据

、、

我试图确定哪一个是我的应用程序的最佳架构，我计划使用python，mysql，角和烧瓶作为python和角之间的中间部分。https://plot.ly/~agmm23/1/我计划在mysql中拥有所有的数据，一旦我需要它将所有的数据导出到熊猫的数据中，并添加一些过滤器(小部件，巧妙地)来确定之前的项目，并基于这些过滤器来绘制漏球和得分的图表。但是现在我不确定哪一个应该是最好的，如果整个图必须用角度来

浏览 0提问于2020-03-07得票数 1

2回答

基于ADF下拉列表的穿梭机填充

假设用户从大陆的下拉列表中选择亚洲，那么下面的穿梭机应该有来自亚洲的国家。我如何在ADF中实现这一点？

浏览 6提问于2017-08-17得票数 1

回答已采纳

1回答

为什么在对Apache中的数据进行洗牌之前需要这么多分区？

背景1)：为什么no有变化。执行洗牌前的分区？Spark默认情况下是通过将分区计数更改为spark.sql.shuffle.partitions中给定的值来实现的。 2)洗牌通常发生在大范围的转换时。我在一本书中读到，数据也保存在磁盘上。

浏览 3提问于2020-06-09得票数 0

回答已采纳

1回答

如何使用tcp连接在go (golang)中编写代理

、、、、

我要实现的思想如下:每当我从客户端收到请求时，我都希望将该请求转发到后端服务器，然后等待(并且什么也不做)直到后端服务器响应我(代理)，然后将该响应转发给客户机(假设这两个TCP连接都将在公共情况下得到维护

浏览 3提问于2014-08-02得票数 11

1回答

在Oracle Apex中实现对穿梭值的依赖

、、、

这个页面有许多字段，比如“文本字段”或“选择列表”等等，这些字段都有自己的逻辑，我被困在两个字段中--穿梭字段(让它命名为A)和文本字段(让它被命名为B)，这应该取决于第一个字段。它们相互作用的办法是：如果你从穿梭机中选择了“其他”的值，你也应该填写文本字段B。我已经尝试过使用从“JavaScript”事件触发的onChange函数，如果穿梭B的右半部分得到了“其他”值，那么这个事件应该是工作的。那么问题是:如何在“主细节”逻

浏览 6提问于2016-08-22得票数 1

回答已采纳

1回答

将Airflow事件流式传输到消息队列

、

一种选择是创建一个可以访问Airflow内部状态的插件，并通过Rest API公开它(有一些现有的实现)，但我更关心的是，是否可以插入Airflow的事件日志并将这些消息流式传输到外部消息队列(例如Kafka

浏览 9提问于2018-08-31得票数 0

2回答

MassTransmit -分布式消息传递模型-可靠/持久- NServiceBus太贵

、、、

我想使用类似于NServiceBus的MassTransmit，每个发布者和订阅者都有一个本地队列。但是，我想使用RabbitMQ。我知道这两台服务器肯定在同一群集中。然而，将50个客户端节点放在一个cluster.....Or中似乎是一件很大的事情，我是应该将它们分开还是将它们联合到服务器集群交换？服务器正在处理后端hl7消息。这里的任何帮助和建议都是在windows机器上提供的，非常感谢

浏览 1提问于2014-05-14得票数 1

1回答

每天使用cookie显示一次弹出窗口

、、、

下面是html，css & js：function showpopup() { var maskHeight = $(document).height:hover {} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></

浏览 1提问于2018-10-22得票数 1

1回答

使用D3在SVG路径上创建方向箭头

、、

每个穿梭机在轨道上向一个特定的方向移动，我希望svg路径显示这个方向，以供快速参考。最初，我试图使用标记在路径上的特定间隔创建箭头，但这只允许我标记路径的中间和末端。我之所以想要整个路径上的箭头，是因为我计划用箭头来表示穿梭机的方向，也可以作为路径长度的指示器。有时，svg表单中的路径与实际路径的长度不匹配，这可能会导致站点上的问题。无论如何， (谢谢@Holger )，然后在D3中实现了这个方法，并且希望有一个地方来分享它，所以我发布这个问题是为了记录我的解决方案(解决方案是作为一个答案发布的)。。

浏览 12提问于2021-12-11得票数 1

回答已采纳

1回答