【Axure 教程】可增删改的多选树

简介: 【Axure 教程】可增删改的多选树

今天教大家用中继器制作可增删改的多选树

【原型预览】

用电脑点击左下方阅读原文或复制打开下面的原型预览地址

https://axhub.im/ax9/b3db3743977d8b2e/#g=1

【原型下载】

方式2:https://weidian.com/item.html?itemID=3665109057

【原型效果】

功能介绍:

展开/收起:点击箭头,可以展开或收起子节点。

640.gif

添加子节点:点击添加子节点按钮,可添加子节点,并在本节点自动生成箭头,如果本节点下方有内容,自动打开内容。

640.gif

添加同级节点:点击添加同级节点按钮,可添加同级节点。

640.gif

删除节点:点击删除节点按钮:删除该节点和该节点的子节点,如果该节点父节点只有该子节点,父节点箭头自动消失。

640.gif

修改节点内容:点击文字可以修改内容。

640.gif

选中:选中当前节点和该节点的子节点,如果同级节点全部选中,同时选中父节点。

取消选中:取消选中当前节点和该节点的子节点,同时取消选中父节点。

640.gif

修改添加默认提示语:enter text……可在原型内的”提示语”文本框,修改内容即可。

编辑默认树列表:在中级器内填写即可,简单实用。

二、使用方法

在中继器中编辑:

  • no:第n个一级内容就写a00000000,例如第一个一级内容:100000000;第a个一级内容下的第b个二级内容就写a0b000000(n>9时,mn000000);以此类推,6级内容为小数点后面的数。
  • column:几级内容就在几级column里填写。
  • jiantou:左边的展开箭头,1代表显示,其他代表隐藏。
  • see:1代表显示,其他代表隐藏。
  • xuan:箭头的方向,1代表向下,其他代表向右。
  • xuanzhong:代表多选框是否选中,1代表选中,其他代表未选中。

640.jpg

修改添加默认提示语:enter text…可在原型内的”提示语”文本框,修改内容即可。

三、制作方法

树形结构的制作,请参考我上一篇文章——可增删改的树形结构

今天主要讲一下如何将树形结构制作成多选树。

(1)逻辑思路

中继器内增加一列选中,当值为1是,选中多选框;否则,取消选中多选框。

选中当前节点时,不仅要选中当前节点,还要选中该节点的所有子节点,如果同级节点全部选中,同时选中父节点。

取消选中节点是,不仅要取消当前的节点,还要取消该节点的子节点,同时取消选中父节点。

我们通过更新中继器xuanzhong的值,来控制选中和取消选中

(2)中继器内材料

在原有的树形结构里加一个多选框,可以使用系统默认的,也可以使用自己制作的美化多选框。

(3)具体交互

选中:

640.png

取消选中:

640.png

640.png

总结


该原型非常实用,但制作相对复杂,新手不容易完成。

制作完成后,以后使用方便,仅需简单填写树中继器的内容,即可拥有完美的效果,所以强烈推荐给各位使用。

 

相关文章
|
JavaScript 前端开发
vue element-ui分页插件 始终保持在页面底部样式
vue element-ui分页插件 始终保持在页面底部样式
500 0
Vue2分页(Pagination)
本文介绍了如何在 Vue3 中创建一个自定义分页组件(Pagination)。该组件支持传入多个参数,如当前页数、每页条数、是否隐藏单页分页等,并提供了丰富的功能,包括快速跳转、显示数据总量及分页器位置调整。通过示例代码展示了组件的具体实现方式,包括模板结构、计算属性、监听方法及样式设置。此外,还介绍了如何在项目中引入并使用该分页组件。
557 0
Vue2分页(Pagination)
【Axure教程】用中继器制作能增删改的树形结构
【Axure教程】用中继器制作能增删改的树形结构
【Axure教程】用中继器制作能增删改的树形结构
【Axure教程】中继器表格集合(增删改查筛选移动排序等效果)
【Axure教程】中继器表格集合(增删改查筛选移动排序等效果)
【Axure教程】中继器表格集合(增删改查筛选移动排序等效果)
|
数据可视化 数据安全/隐私保护
Axure教程:通用权限管理原型
Axure教程:通用权限管理原型
Axure教程:通用权限管理原型
|
23天前
|
人工智能 自然语言处理 Shell
🦞 如何在 OpenClaw (Clawdbot/Moltbot) 配置阿里云百炼 API
本教程指导用户在开源AI助手Clawdbot中集成阿里云百炼API,涵盖安装Clawdbot、获取百炼API Key、配置环境变量与模型参数、验证调用等完整流程,支持Qwen3-max thinking (Qwen3-Max-2026-01-23)/Qwen - Plus等主流模型,助力本地化智能自动化。
33719 134
🦞 如何在 OpenClaw (Clawdbot/Moltbot) 配置阿里云百炼 API

热门文章

最新文章