亚搏体育官网当前选中位于6级节点时

当前位置:亚搏体育官网 > 亚搏体育官网 > 亚搏体育官网当前选中位于6级节点时
作者: 亚搏体育官网|来源: http://www.daiwagarou.com|栏目:亚搏体育官网

文章关键词:亚搏体育官网,静态控件

  树结构是原型设计中常用的控件之一,常用于组织架构等功能。本文作者参照钉钉后台组织架构样式,使用Axure中继器实现动态树结构控件。

  点击编辑,弹出编辑弹出框,可修改部门名称、删除部门(父节点不允许删除)。

  在Axure画布中新增组合元件“Node”,构成元素:组合元件“Comb”+矩形(未命名,宽352,高40),并调整到合适大小;

  新增中继器“Tree”,将组合元件“Node”复制其中,并设置中继器属性“隔离列表项之间的选项组”为“不勾选”;

  将已经选中的行的“Selected=1”的数据更新为不选中,即“Selected=0”;

  设置中继器Tree-载入时默认选中初始节点(即“Selected=1”的节点):

  由于点击三角箭头(Triangle)时,既需要判断箭头当前的形态(TriangleSelected是否=1),亚搏体育官网又需要判断当前节点所处层级,进一步更新当前节点子节点的可见状态,为了减少配置量,我们需要先创建两个文本标签用于辅助,并添加相关交互。

  新增辅助文本标签(Assist-闭合时展开Push)、(Assist-展开时收起Pull),并设为隐藏;

  即:判断当前箭头所处的节点,并更新当前节点的次级节点可见状态为“1”,即可见:

  即:判断当前箭头所处的节点,更新当前节点的下所有子节点(含孙节点)可见状态为“0”,即不可见。更新当前节点的下所有子节点(含孙节点)的三角箭头状态的选中状态为“0”,即未选中:

  设置按钮-添加子部门(Button-Add)载入时效果,判断当前选中节点是否位于第6级节点,若是,不显示添加子部门按钮;

  设置选中子节点时触发事件:按钮-添加子部门(Button-Add)载入时;

  单击时按钮-添加子部门(Button-Add)时,显示动态面板(Add&Edit),并设置动态面板状态为state1;

  即:当动态面板可见且面板状态=state1时,设置文本标签(AddParmentName)为当前选中节点名称,设置文本标签(AddDepartmentName)为空,并设置焦点于文本标签(AddDepartmentName);

  当动态面板可见且面板状态=state2时,设置文本标签(EditDepartmentName)为当前选中节点名称,并设置焦点于文本标签(EditDepartmentName)(Ps.此处非常遗憾由于中继器限制,无法通过ParmentNo获取到当前节点父节点的名称);

  设置state1-确定按钮交互,单击时向中继器(Tree)中添加一行,详细如下:

  当上级部门位于第6级节点时,不做处理(最多只支持6级节点,当处于第6级节点数时,已对按钮-添加子部门(Button-Add)做了隐藏处理)。

  设置按钮-设置(Button-Edit)载入时效果,判断当前选中节点是否位于第1层级,若是,不显示设置按钮;

  单击时按钮-添加设置(Button-Add)时,显示动态面板(Add&Edit),亚搏体育官网并设置动态面板状态为state2;

  设置state2-确定按钮交互,即单击时更新中继器(Tree)数据,详细如下:

  当前选中位于6级节点时,更新umn6的值为文本标签(EditDepartmentName)值;

  当前选中位于5级节点时,更新umn5的值为文本标签(EditDepartmentName)值;

  根据当前节点序号,可以通过拼接的方式计算出父级节点序号[[ParrentNo]],但暂未找到方法根据[[ParrentNo]]获取父级节点名称,导致编辑时,上级部门无法做成动态;

  由于无法根据当前节点序号计算出次级节点个数,在导入初始数据时,需要人工导入次级节点个数,并保证数据正确;

  本案例在制作过程中部分思路参考了《Axure教程:可增删改的树型结构》,作者:梓贤vigo。

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

  听到很多言论说在中国程序员是吃青春饭的,那么产品经理呢,也吃青春饭吗?

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、亚搏体育官网社群为一体,全方位服务产品人和运营人,成立9年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。

网友评论

我的2016年度评论盘点
还没有评论,快来抢沙发吧!