Axure的增删改查

Axure的增删改查

用axure来实现增删改查的交互动作，涉及到的元件有动态面板、中继器等，其中涉及到的动作有标记行，删除行，更新行，新增行。

使用中继器完成表单数据的显示

1、先添加好自己想要的原件。

 

2、添加中继器，动态生成表单数据。

 

点击中继器，为其添加交互事件，将表格上的数据遍历到中继器上

 

 

增加功能

1、添加一个按钮和动态面板，为动态面板添加两个状态，一个是添加是弹出的状态一窗口，一个是点击编辑时弹出的状态二窗口，动态面板写入添加的表单，再将动态面板隐藏起来。

 

 

2、点击添加按钮时，首先要把隐藏起来的动态面板显示出来，其次是为动态面板状态一的确定按钮添加交互事件，点击确定的时候，要将进行新增行的动作和隐藏动态面板的动作，新增完成以后要将文本框的内容置空（下一次在点击添加按钮的时候，表单需要时空的）点击取消时，直接将动态面板隐藏起来。

添加按钮的交互事件：（弹出模态框）

 

动态面板取消按钮的交互事件：（所有的取消按钮的交互事件是一样的）

 

动态面板确定按钮的交互事件：

 

 

编辑功能

点击编辑的小图标时，有三个动作需要完成，第一个是弹出模态框，第二个是取消全部标记，为避免全面选中时标记了全部行，导致不知道更新哪行，第三个标记当前行，将当前行数据显示在模态框上。

 

编辑模态框的确定按钮事件：

当鼠标单击确定按钮时，要完成两个动作，第一个是完成更新行的操作，第二个是关闭模态框

 

编辑模态框的取消按钮事件和上面一样，鼠标单击时完成模态框的隐藏。

删除功能

点击删除的图标，完成的事件就只有一个，就是完成删除行的操作。

 

全选功能

全选功能的交互事件，就是点击全选的图标时，完成全部行的标记，并显示为选中状态。

 

全部删除

点击批量删除的按钮，完成删除已标记行的操作即可。

 

搜索功能

点击搜索按钮，完成新增过滤器的动作即可，根据名字来查找，列表中的每一项名字.indexOf(搜索文本框)大于负一，即有匹配的文字时，就能搜索到。