Axure_中继器实例_用户列表

2020-02-22  本文已影响0人  JonWang_js

把学得一个例子复盘一下:

不喜欢看图的,可以看下面文字。

一、功能需求-用户信息增删改

1.插入(新增):上行插入和下行插入:插入时,行数据为空,且处于编辑状态,保存后,新增成功

2.编辑与保存

3.删除

二、功能实现

1.主体,首先要做了一个用户列表出来

①内容用多个矩形框做中继器出来,其中最后两列分别填写文字为编辑和删除

②为了能区分编辑状态和展示状态,需要将中继器中 主要内容和编辑(不用包括删除)转化成动态面板,复制其状态1到新增的状态2,在原来的矩形中增加文本框(去边框),将“编辑”二字,换成“保存”。

2.上下行插入思路

①中继器数据集中,除了需要的字段一一对应外,需要加一个行号的字段。

②这个行号,可以在右击动态面板的时候赋给一个全局变量,也就是让这个变量记录下刚刚点击的是哪一行:通过点击不同的分项(垂直菜单或者两个拼起来的矩形,写入上方插入和下方插入)更新行。

③通过移动动作,右击动态面板的时候,让这个分项的菜单移动到鼠标刚刚点击的位置。

④上方插入,就把此行及以下的行号加1,下方插入就把仅此行以下的行号加1(其中下方插入,还要将全局变量+1,为了后面设置让插入状态时的行对应为为编辑状态)

⑤注意此时,因为刚刚右击记录这个行号到全局变量中,所以多加一个动作,添加行,其他的地方不填,就把行号这个字段添入全局变量。就能插入一个空行了

⑥而为了让插入行时,就是编辑状态:

    A.正常是只要将中继器每项加载时动态面板中的展示状态中矩形框文字以及编辑状态的文本框文字设成中继器中相应字段,即可

    B.这里还需要对上面一条进行分情形来操作:

        B1.如果该行的行号不等于全局变量,就按照上面的方法来设置

        B2如果该行的行号等于全局变量,则设置动态面板为编辑状态且获取焦点为第一列文本框

        B3中继器加一个载入时的按照行号排序

3.编辑与保存,

①对于编辑的交互比较简单,就是给编辑矩形框增加点击切换动态面板,获取一个焦点,

②保存则内容稍多一点:

    A. 点击后,更新行,行的内容分别对应编辑的文本框的内容(用局部变量来实现就好了)

    B.因为保存是在编辑时候用,也在插入的时候用到,插入时候用要对于全局变量进行情况,所以保存按钮上要加一个这个内容。

    C.且将动态面板转化为展示状态。

4.样式上的内容:关于中继器的框线过于粗重

①横向:把偏好设置中内边缘对其,像素也成0,然后图中方块之间,横向会靠齐无缝

②纵向:把中继器中的框线可见性,纵向上边线不可见。则不会有重复加粗的效果,表格更清爽。

三、反思

①对于交互来说拆解以及考虑周全的逻辑,需要瞻前顾后

②相对于axure用法来说,算是中高的应用,但功能却是基本的用户列表的设计,也是常见的的中继器的实例,所以任重而道远。

上一篇下一篇

猜你喜欢

热点阅读