第一步:展示数据
- 做表头1*7的,修改底色为灰色(方便和下面的数据分隔开,好查看)
- 修改文本框内容,第一个空着,后面一次改为“姓名”,“性别”,“年龄”,“电话”,“操作1”,“操作2”
- 添加一个中继器,复制表头,双击进入编辑区域,粘贴表头,删除原有的一个矩形框,将复制的表头拉到原点
- 删除中继器编辑器中表头的文字,并将其重新命名为“姓名”,“性别”,“年龄”,“电话”,“修改”,”删除“,特别的将”修改“,”删除“修改样式,成为蓝色加下划线,保留”修改“、”删除“的表头内容
- 退出中继器编辑器添加数据,第一行分别命名为name,gender,age,tel,下面行为需要添加的数据,这里添加了22行数据
- 将中继器的数据关联起来,在数据项加载时
第二步:删除数据
进入中继器编辑器,设置”修改“点击时的交互样例为删除this行
第三步:修改数据
-
退出中继器编辑区,增加一个修改弹出框
-
弹出框,一个矩形中四个标签文本内容分别是“姓名”,“性别”,“年龄”,“电话”,再有四个文本框,分别命名为“姓名”,“性别”,“年龄”,“电话”,下方两个矩形框,分别将文本内容和命名为”确认“和”取消“,将所有内容进行组合和命名为”修改弹出框“,设置为隐藏
-
双击修改进入中继器编辑区,添加鼠标单击时用例,标记this行
-
设置”姓名“的文本为中继器数据库”name“列的值
依次类推设置”性别“、”年龄“、”电话“
-
显示修改弹出框
-
退出中继器编辑器,为确认按钮更新已标记的每列对应的数据
为确认按钮继续添加交互,取消所有标记行,隐藏修改弹出框
- 为取消按钮添加点击时隐藏修改弹出框的交互用例
第四步:添加数据
- 添加一个按钮和一个添加弹出框
- 为添加按钮增加交互用例,点击时显示添加弹出框
- 为确认按钮增加点击时用例,为中继器添加行后隐藏添加弹出框
- 为取消按钮添加点击用例为隐藏添加弹出框
第五步:搜索
-
添加一个搜索框、一个模糊搜索、一个精准搜索框,分别将内容和命名为”搜索“、”模糊搜索“、”精准搜索“
-
为精准搜索添加点击时用例
用例1:当搜索框为空时,移除全部筛选条件
用例2:当搜索框不为空是,添加中继器筛选
-
为精准搜索添加点击时用例
用例1:搜索框为空时,移除所有筛选条件
用例2:当搜索框不空时,添加筛选条件
第六步:分页跳转
-
将中继器中的数据进行分页
-
拖入”上一页“、”下一页“选择按钮
-
为两个按钮添加点击时按钮
-
添加”首页“和”末页“按钮,并为其添加点击时用例
-
跳转设置,设计两个按钮和一个文本框,按钮内容分别时”跳转至“、”页“,文本框命名为跳转页数,文本框添加文本改变时的用例
-
设置页码,添加一个文本,命名为”页码“,点击中继器,在加载时设置文本
第七步:全选、取消、反选
- 进入中继器,添加一个复选框,命名为”选择“,在第一列
- 退出编辑器,添加三个按钮分别命名和内容设置为”全选“,”取消“,”反选“
- 为按钮添加点击时用例,对应的值分别为true、false、toggle
第八步:排序
- 添加一个三角形并命名为”三角形“,放在年龄右上方
- 为”年龄“添加点击时用例,添加排序,并将三角形旋转
可以为按钮等添加鼠标移入和按下的交互样式