本文适合对中继器有一定使用基础的同学。
我们在做产品方案时,有些产品场景会用到表格内的行编辑功能。
我用Axure的中继器来实现这个效果。
先看一下效果:https://d412or.axshare.com
一、需要的组件
两个按钮、一个中继器、一个动态面板(右击显示菜单用的)
另外设置一个全局变量:CurIndex,用来保存当前行的序号;IsNew,用来区别是新增还是编辑。
中继器中,设置如下:
1、中继器的行放一个动态面板,这个动态面试主要是用来显示只读还是编辑界面,如下去:
2、中继器的内容设置如下:
state:用来标识是只读还是编辑(0是只读,1是编辑)
no:是需要,新增行时用得到。
3、菜单的动态面板设置如下:
默认为:隐藏
二、交互设置如下:
1、首先是中继器的交互。这里要实现新增编辑时,当前行就显示编辑状态,否则默认显示只读状态;同时,如果标记了,则标记的行为选中状态(实现聚焦的效果)
交互说明:
中继器加载时,需要设置以“no”字段排序;
中继器每项加载时,当state为1时,显示编辑状态
2、现在来实现在某一行右击时,弹出菜单后,选择在当前行上面增加一行,还是在下面增加一行。
在上面增加一行的逻辑:
右击时,记下当前行的序号。在当前行上面增加一行,说明要把当前行及后面的所有行的序号都加1,然后新增的这一行的序号为当前行即可。如下图:
在中继器某一行中进行鼠标右击的交互。
弹出菜单的“在上面插一行”的交互如下
交互说明:
1、首先,把当前行及后面的行的序号都加1;
2、中继器添加一行,添加一行的数据如下:
说明:state一定需要赋值为1;
“在下面插入一行”的交互如下:
原理和上面的一样。
行内的“编辑”、“保存”的交互都是修改中继器的数据即可。
“取消”的交互,需要注意一下:如果是新增后的取消,需要把当前行以后行的序号-1,如果是编辑进入的取消,则只需要改变state为0,即可。如下图:
“新增为第一行”按钮的交互如下:
“在最后增加一行”的交互,就留给大家去思考一下。应该是没有问题。