上一章已經(jīng)講了增加和刪除的原型案例，具體可查看《axure8.0快速入門新手教程：添加刪除》，而這章要講的修改和查詢，主要是對增加和刪除起到一個輔助作用。為什么說是輔助呢？因為沒有了修改，可以用先刪除后增加的方法；因為沒有了查詢，可以用肉眼一條一條數(shù)據(jù)查看。但是有了它們，將會讓數(shù)據(jù)管理起來更加簡單便捷。
第一步：拖拉擺放好相關(guān)控件
1、搜索框和搜索按鈕：搜索框是一個170X29的文本框，命名為“搜索框”，而搜索按鈕為白底黑框，80X30的矩形元件，放在“搜索框”右邊；
2、數(shù)據(jù)表格（表頭）：1行5列，灰底黑框的表格作為表頭，從左到右每個格子的文字分別為：姓名、性別、年齡、電話和操作，字體全部加粗；
3、數(shù)據(jù)表格（表身）：一個中繼器，中繼器里面是一個1行5列，白底黑框的表格，從左到右5個格子分別命名為“姓名”、“性別”、“年齡”、“電話”和“修改”，其中最右邊一個格子文字為：修改，字體為藍色加下劃線。
4、表單彈框：4個文本標簽、4個文本框以及2個矩形組成的表單彈框，組合命名為“彈出框”，初始狀態(tài)設(shè)置為隱藏。
（1）4個文本標簽分別為姓名、性別、年齡和電話；
（2）4個文本框分別命名為“姓名”、“性別”、“年齡”和“電話”，一一對應(yīng)放在文本標簽右邊；
（3）2個矩形中，一個是確認按鈕，另一個是取消按鈕。
第二步：為搜索按鈕設(shè)置交互樣式和交互用例
交互樣式為：鼠標懸停和鼠標按下均設(shè)置填充顏色為灰色；
交互用例為：鼠標單擊時，如果“搜索框”為空，那么就移除中繼器全部的篩選條件，如果“搜索框”不為空，那么就添加“搜索框”文字等于“姓名”的搜索條件，同時移除其他的篩選條件。
第三步：為中繼器設(shè)置數(shù)據(jù)庫和交互用例
中繼器中的數(shù)據(jù)庫設(shè)置如下：
為中繼器添加每項加載時用例
用例中設(shè)置“姓名”的文本對應(yīng)中繼器數(shù)據(jù)庫的“name”列；
用例中設(shè)置“性別”的文本對應(yīng)中繼器數(shù)據(jù)庫的“sex”列；
用例中設(shè)置“年齡”的文本對應(yīng)中繼器數(shù)據(jù)庫的“age”列；
用例中設(shè)置“電話”的文本對應(yīng)中繼器數(shù)據(jù)庫的“tel”列。
第四步：為修改按鈕設(shè)置鼠標單擊時用例
1、標記this行；
2、
設(shè)置“姓名”的文本為中繼器數(shù)據(jù)庫“name”列的值；
設(shè)置“性別”的文本為中繼器數(shù)據(jù)庫“sex”列的值；
設(shè)置“年齡”的文本為中繼器數(shù)據(jù)庫“age”列的值；
設(shè)置“電話”的文本為中繼器數(shù)據(jù)庫“tel”列的值。
3、顯示“彈出框”。
第五步：為確認按鈕設(shè)置鼠標單擊時用例
1、更新已標記行的每列對應(yīng)數(shù)據(jù)
2、取消中繼器的全部標記；
3、隱藏“彈出框”。
第六步：為取消按鈕設(shè)置交互用例
交互用例設(shè)置為：隱藏“彈出框”。
點擊預(yù)覽，然后“輸入名字——點擊搜索”或者“點擊修改——填寫表單——點擊確認”，就可以看到修改查詢的效果了。同時也可以隨時關(guān)注我的個人博客：http://weidublog.com，因為工作過程中有很多這些axure原型設(shè)計小技巧的例子，所以我會堅持分享下去，希望對大家有幫助，你們對我的關(guān)注就是我的動力。
更多原型案例：http://weidublog.com/index.php/2017/03/20/181/
作者：維度
轉(zhuǎn)載請注明出處：http://weidublog.com/index.php/2017/04/11/362/
