axure树形表格_Axure教程：可增删改的树型结构

原标题：Axure教程：可增删改的树型结构

今天，教大家如何做一个树型结构，以及节点与节点之间相互交互的内容。

演示地址：http://b0bgsg.axshare.cn/#g=1&p=树

一、效果介绍

功能介绍：

展开/收起：点击箭头，可以展开或收起子节点。

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

添加同级节点：点击添加同级节点按钮，可添加同级节点。

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

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

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

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

二、使用方法

在中继器中编辑：

no：第n个一级内容就写a00000000，例如第一个一级内容：100000000；第a个一级内容下的第b个二级内容就写a0b000000(n>9时，mn000000)；以此类推。6级内容为小数点后面的数

column：几级内容就在几级column里填写

jiantou：左边的展开箭头，1代表显示，其他代表隐藏

see：1代表显示，其他代表隐藏

xuan：箭头的方向,1代表向下，其他代表向右

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

三、制作方法

(1)设置中继器内的表格

如下图所示填写中继器

(2)逻辑思路

no为主要逻辑，用于定位，不可重复。小数点后两位代表六级内容，个位和十位代表5级内容，百位和千位代表4级内容，万位和十万位代表三级内容，百万位和千万位代表二级内容，亿以上代表一级内容。

column1-6,填写显示的内容

jiantou：左边的展开箭头，1代表显示，其他代表隐藏，如果当前节点有子节点，需要填1

see：1代表显示，其他代表隐藏

xuan：箭头的方向,1代表向下，其他代表向右

(3)中继器内材料

箭头一个，文本框一个，添加同级节点按钮一个，添加子节点按钮一个，删除按钮一个。

(4)具体交互

中继器载入时：筛选可见的节点，see=1。

每项加载时：设置内容、箭头。

展开和收起：点击箭头时，更新子节点的see，如果要展开就设为1，否则设为0,同时设置该节点箭头方向，展开向下xuan为1，收起向右xuan为0。

添加子节点：点击添加子节点，先设置所有子节点的no数字+一个数，子节点是6级就加0.1,五级就加1，如此类推，然后添加一个新的子节点，no为该节点+1个数，原理同上，最后排序。

添加同级节点：该节点下面所有节点的no加一个数字，如果该节点是6级，就加0.1,五级就加1，如此类推。然后添加一个新的同级节点，no为该节点+1个数，原理同上，最后排序。

删除节点：删除该节点以及该节点下所有的子节点。

修改节点内容：点击文本框，修改内容后，失去焦点时，跟新改行的column。

总结

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

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

本文由 @梓贤Vigo 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议返回搜狐，查看更多

责任编辑：

axure树形表格_Axure教程：可增删改的树型结构相关推荐

axure树形表格_Axure教程：Axure中继器实现动态树结构控件详解
树结构是原型设计中常用的控件之一,常用于组织架构等功能.本文作者参照钉钉后台组织架构样式,使用Axure中继器实现动态树结构控件. 一.交互样式初始样式(以钉钉后台-通讯录-组织架构为例): 初始载 ...
antd 表格树如何展开_React Ant Design树形表格的复杂增删改
React Ant Design树形表格的复杂增删改最近由于业务接触了antd,使用antd完成一个复杂的树形表格的显示以及修改.在这其中碰见了很多坑,不少功能antd只写了初步的功能,更为细化 ...
ExtJs2.0学习系列(14)--Ext.TreePanel之第三式(可增删改的树)
继续tree的learn! 今天就来个可增删改的树吧,操作数据库就使用比较方便的Linq,无非就是增删改! LinqData.dbml: html代码: <body><divid=& ...
【唠叨两句】如何将一张树型结构的Excel表格中的数据导入到多张数据库表中...
小弟昨天遇到一个相对比较棘手的问题,就像标题说的那样.如何将一张树型结构的Excel表格中的数据导入到多张数据库表中,在现实中实际是七张数据库表,这七张表之间有着有着相对比较复杂的主外键关系,对于我这 ...
axure树形表格_表格树形菜单/excel 如何实现分级显示，也就是树形的菜单
在EXCEL如何制作树形结构的下拉菜单进行输入到单元格这个是可以的,但要用VBA编写. 如何利用Axure RP 8设计树形菜单列表并控制组件"Classic Menu-Horizont ...
mysql 递归查询树型结构_MySQL递归查询所有子节点，树形结构查询
--表结构 CREATE TABLE `address` ( `id` int(11) NOT NULL AUTO_INCREMENT, `code_value` varchar(32) DEFAUL ...
vxe-table 虚拟树、树形表格的使用
vxe-table 虚拟树.树形表格的使用如果开启虚拟树,只需要设置 y-scroll.gt(纵向虚拟滚动,默认100)或 x-scroll.gt (横向虚拟是滚动) transform 自动将列表 ...
【Axure教程】用中继器制作树形表格
树形表格在系统中是非常常用的表格类型,可以反映父级和子级关系,可以快速查看全局数据,也可以下钻查看详细的数据.因为Axure里只提供了基础的表格元件,没有提供树形表格的元件,所以今天作者就教大家如果用 ...
【Axure高保真原型】多选树形表格
今天和大家分享多选树形表格的原型模板,可以点击点击展开或者收起子级内容,也可以点击多选按钮,选中或取消选中,包含全选.全部取消,能自动根据子级选中的数量反选父级.这个原型模板是用中继器制作的,所以使用 ...

axure树形表格_Axure教程：可增删改的树型结构

axure树形表格_Axure教程：可增删改的树型结构相关推荐

最新文章

热门文章