百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

树形穿梭框(树形穿梭框vue)

zhezhongyun 2025-05-02 22:36 26 浏览

编辑导语:在多分组的筛选场景下,树形穿梭框较为常用,一般应用于数据、名单的选择。那么,应该如何制作树形穿梭框?本篇文章里,作者总结了一份树形穿梭框的Axure教程,一起来看一下。

树形穿梭框常用于多分组之间的筛选,例如从多个营业厅、多个部门中选择优秀员工,又或者从不同的班级里面挑选学生比赛。树形穿梭框就能应用于多分组条件中选择具体数据、名单的情况。

下面我会通过评选积极员工的树形穿梭框为案例教程,矩形效果如下图所示:

原型地址:
https://hak3nz.axshare.com/#g=1

一、主要材料

1. 树元件

即左上角营业网点部分的元件,我们用axure里面原生的树元件即可。

2. 中继器1(员工名单)

即右上角员工名单的中继器,中继器内部是多选框组成。中继器表格有4列组成:

  • Column1——代表该员工所在的营业厅,对应上面树元件的营业厅;
  • Column2——代表员工姓名;
  • Column3——代表员工职位;
  • xuanzhong——代表多选框是否选中,默认为空即可。

3. 中继器2(已选名单)

即下面已选名单内容,中继器内部由矩形和关闭按钮X组成。中继器表格内仅需要一列Column0,代表员工姓名既可以。

二、思路讲解

这个原型主要是通过选择树节点(选择对应的营业厅),根据不同的营业厅,筛选出该营业厅下对应的员工;然后在员工名单中选中员工后,出现在已选名单中,如果取消选中,则消失在已选名单中;如果在已选名单中取消员工,那么也应该在员工名单中取消选中。

这个原型主要涉及以下的交互逻辑:

  1. 筛选——筛选出选中营业厅下对应的员工;
  2. 两个中继器之间的交互,两个中继器之间值的传递。

三、交互制作

1. 树元件的交互

当鼠标单击树节点时(营业厅节点),添加对中继器1(员工名单的中继器)筛选事件,筛选条件为中继器1的Column1的值等于当前鼠标单击的树节点的值相同。因为有很多个树节点(营业厅),所以我们用this.text,这样就可以直接将这个交互复制粘贴到所有的树节点。

默认显示的营业厅,例如案例的第一个天河区营业厅,在载入是还需要用到触发事件,触发当前节点鼠标单击时的交互。

2. 中继器1(员工名单的中继器)的交互

在中继器1每项加载时,我们将多选框的文字设置为中继器第二列员工姓名和第三列员工职位的值,例如员工姓名1(客户经理),你们也可以根据实际需要显示的内容来设置。

然后还需要增加一个条件,我们通过用中继器第四列的值控制多选框是否选中,所以如果xuanzhong列的值等于1,这是我们设置多选框为选中状态,否则就默认为非选中状态。

在每项加载时,我们增加情形2,对应条件为item.xuanzhong==1,如果符合该条件,执行交互,设置多选框的为选中状态。如果item.xuanzhong不等于1,理论上我们要设置多选框为非选中状态,但是因为多选框默认为非选中状态,所以我们不需要多此一举,后半段的交互就可以不用写了。

在多选框的上面我们需要增加一个热区挡住多选框,因为多选框是否选中是由中继器xuanzhong列的值决定的。所以多选框上的热区时,能防止鼠标直接点击改变多选框的是否选中。

在鼠标单击多选框上面的热区时,我们需要分两种情况。

1)情况1

当xuanzhong列的值等于1,即原本是已选中的状态,从已选中到未选中,我们执行更新行的交互,更新当前行xuanzhong列的值为0,这要就可以取消选中。

除此之外,因为本来是已选中的状态,所以在中继器2(已选名单的中继器)里面本来是有这个名单的,我们需要在中继器2里删除这位取消选中的员工,所以执行删除行的交互,删除的条件为Item.Column2的值等于 TargetItem.Column0的值,Item.Column2就是对应员工名单中继器里的员工名字;TargetItem.Column0就是对应已选员工中继器里的员工名字。

2)情况2

当上面的情绪不成立(xuanzhong列的值不等于1),即原本是未选中的状态,从未选中到选中,我们首先要执行更新行的交互,更新当前行xuanzhong列的值为1,这样就可以选中当前行的多选框。

然后,我们还要将该员工的名称添加到已选名称中,所以我们需要用添加行的交互,添加的值为Item.Column2(员工名称)。

3. 中继器2(已选名单的中继器)的交互

当中继器2每项加载时,我们要设置中继器2里面的矩形的文本==Item.Column0,这个交互是默认的,如果没有删除过一般不需要我们写。

需要我们写的是当鼠标单击取消X按钮时的交互,如果我们想删去这个员工的名单,要做两个交互,一个是删除当前中继器的当前行,例一个是取消中继器1(员工名单中继器)对应员工的选中。

我们要先做取消中继器1(员工名单中继器)对应员工的选中,因为如果先删除当前行的话,删除之后找不到对应的值去更新了,所以我们要先更新中继器1,我们执行更新行的交互,更新的条件是Item.Column0==TargetItem.Column2,将xuanzhong列的值更新为0即可。

这样我们就完成制作树形穿梭框了,如果树的内容比较多,或者中继器内容比较多,还可以将他们转成动态面板增加滑动条。也可以自己美化样式,例如鼠标悬停时的样式等等。

制作完成后,下次使用的话只需要修改树节点和中继器1里面的内容,即可自动生成交互效果,复用性极强。

那以上就是本期的全部内容了,感谢您的阅读,我们下期见,88~~~

本文由 @做产品但不是经理 原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议。

相关推荐

3 分钟!AI 从零开发五子棋全过程曝光,网友:这效率我服了

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8...

一行代码实现display&quot;过渡动画&quot;原理

作者:Peter谭老师转发链接:https://mp.weixin.qq.com/s/XhwPOv62gypzq5MhhP-5vg写本文的起因上篇文章,提到如何让display出现过渡动画,却没有仔...

脑洞:琼恩·雪诺、蝙蝠侠和魔形女的灵魂宠物了解一下

AlekseiVinogradovisaRussianfreelancedigitalartistwhoshareshisskillsandtalentwith120k...

浏览器的渲染机制、重绘、重排

1、什么是重排和重绘网页生成过程:HTML被HTML解析器解析成DOM树css则被css解析器解析成CSSOM树结合DOM树和CSSOM树,生成一棵渲染树(RenderTree)生成布局(flo...

托福写作高频考题写作思路&amp;词汇丨考虫独家

科技话题与媒体话题是托福写作的常考话题很多考生对这两类话题里的专有词汇表达也许很不了解所以今天就跟随考虫托福写作老师刘云龙老师一起来学习在这些话题的写作里你可以使用哪些有用的表达。希望大家有收获!记得...

在优麒麟上使用 Electron 开发桌面应用

使用Web标准来创建桌面GUI,上手快、成本低、跨平台、自适应分辨率,这些都是Electron的优势。作者/来源:优麒麟Electron是由Github开发,用HTML、CSS和...

php手把手教你做网站(三十八)jquery 转轮盘抽奖,开盲盒

抽奖和开盲盒性质一样的都是通过ajax读取后台的随机数据。1、转轮盘本来是想直接绘图实现轮盘,但是没有找到怎么填充文字,只好把轮盘弄成了背景图,通常用于游戏抽道具,商城积分抽奖,公司年末员工抽奖点击抽...

用 CSS 整活!3D 轮播图手把手教学,快乐代码敲出来

兄弟们,今天咱来搞点好玩的——用CSS整一个3D轮播图!咱野生程序员就是要在代码里找乐子,技术和快乐咱都得要!代码是写不完的,但咱能自己敲出快乐来,走起!一、先整个容器,搭个舞台咋先写一个...

实现一个超酷的 3D 立体卡片效 #前端开发

今天我们来实现一个超酷的3D立体卡片效果。正常情况下就是一个普通的图片展示卡片,鼠标悬停的时候图片会跳出卡片,并将影子投射到背景卡片上,在视觉上有一个3D立体感。html主要分成3个部分:容器→背景层...

Vue 3 Teleport与Suspense:解决UI难题的两个&quot;隐藏大招&quot;

模态框的"层级噩梦"与Teleport的救赎"这个模态框怎么又被父容器截断了?"团队协作开发后台系统时,小张第N次遇到这个问题。多层嵌套的组件结构里,弹窗被overfl...

让交互更加生动!有意思的鼠标跟随 3D 旋转动效

今天,群友问了这样一个问题,如下所示的鼠标跟随交互效果,如何实现:简单分析一下,这个交互效果主要有两个核心:借助了CSS3D的能力元素的旋转需要和鼠标的移动相结合本文,就将讲述如何使用纯CSS...

填坑:transform元素导致zindex失效终极方法

今天遇到了使用css3动画的元素层级被放大置顶的问题,ios浏览器上没问题,安卓原生浏览器和安卓微信上有问题。使用了css3动画的元素z-index失效,兄弟元素设置多高的z-index都盖不住解决办...

诡异的层级错乱:一个被transform隐藏的CSS陷阱

周五下午三点十七分,设计部突然发来紧急截图——原本应该悬浮在顶部的导航菜单,此刻正诡异地被下方的轮播图遮挡。我盯着屏幕上错乱的层级关系,手指下意识地敲下z-index:9999,心里清楚这不过是程序...

动画篇--碎片动画

本文授权转载,作者:Sindri的小巢(简书)前言从最开始动笔动画篇的博客,至今已经过去了四个多月。这段时间回头看了看自己之前的动画文章,发现用来讲解动画的例子确实不那么的赏心悦目。于是这段时间总是想...

Nature:大洋转换断层处的拉张构造与两阶段地壳增生

Nature:大洋转换断层处的拉张构造与两阶段地壳增生转换断层是三种基本的板块边界之一,全球总长度超过48000km(Bird,2003),它们的发现为板块构造理论的建立奠定了重要的基础(Wil...