在系統(tǒng)中，將excel表格的數(shù)據(jù)上傳或?qū)?，是一個(gè)非常常見(jiàn)且必要的功能。本文作者分享了如何在Axure中制作模擬上傳表格數(shù)據(jù)效果的原型模板的教程，一起來(lái)學(xué)習(xí)一下吧。

在系統(tǒng)中，將excel表格的數(shù)據(jù)上傳或?qū)?，是一個(gè)非常常見(jiàn)且必要的功能。所以今天作者就教大家在Axure中怎么制作模擬上傳表格數(shù)據(jù)效果的原型模板。

一、效果展示

1、點(diǎn)擊上傳按鈕后，可以選擇本地的文件，如果不是excel文件，就會(huì)彈出提示，如果是excel文件，就會(huì)模擬顯示表格數(shù)據(jù)；

2、可以修改已上傳的表格數(shù)據(jù)；

3、可以在表格對(duì)應(yīng)位置插入行、復(fù)制行和刪除行。

二、制作教程

1. 表格的制作

導(dǎo)入后顯示的表格我們主要分成3部分內(nèi)容——表格表頭、表格內(nèi)容、操作按鈕

1）表格表頭

直接用多個(gè)矩形制作而成，需要多少行就添加多少個(gè)矩形，填寫上對(duì)應(yīng)的表頭文字，案例中的模板共11列，包括序號(hào)、姓名、語(yǔ)文、數(shù)學(xué)、英語(yǔ)、政治、物理、化學(xué)、地理、生物、歷史，擺放如下頭所示

2）表格內(nèi)容

表格內(nèi)容我們用中繼器來(lái)制作，中繼器里面放置和表頭一樣的矩形，每列寬度要和表頭一致，這樣才能對(duì)齊，矩形默認(rèn)透明色，這樣不會(huì)擋住后面的背景色，禁用時(shí)的交互樣式，我們?cè)O(shè)置邊框線為藍(lán)色。除第一個(gè)序號(hào)對(duì)應(yīng)的矩形外，在每個(gè)矩形上方放置一個(gè)輸入框，輸入框的顏色也是透明，最后我們?cè)诘撞刻砑右粋€(gè)透明的矩形作為背景矩形，背景矩形將整行內(nèi)容包裹起來(lái)，設(shè)置元件選中樣式為淺藍(lán)色，后續(xù)做一個(gè)移入高亮變色的效果。

中繼器表格也是共11列，我們把對(duì)應(yīng)的內(nèi)容如下圖所示填寫好：

在中繼器每項(xiàng)加載時(shí)，我們用設(shè)置文本的交互，將中繼器各列的值設(shè)置到對(duì)應(yīng)的元件里，例如no列的值設(shè)置到序號(hào)對(duì)應(yīng)的矩形，column1~10就分別設(shè)置到姓名、語(yǔ)文、數(shù)學(xué)……歷史各個(gè)輸入框里。

各個(gè)輸入框獲取焦點(diǎn)時(shí)，我們用禁用的交互，禁用該輸入框?qū)?yīng)的矩形，因?yàn)榍懊嬖O(shè)置了禁用樣式，所以禁用之后就會(huì)顯示邊框線，這樣可以清楚選擇了那個(gè)格子。

然后我們?cè)谟眠x中的交互，設(shè)置背景矩形選中，因?yàn)榍懊嬖O(shè)置了選中樣式是淺藍(lán)色，所以就相當(dāng)于將該行高亮變色了。

失去焦點(diǎn)時(shí)，用啟用的交互，將背景矩形重新啟用；用選中的矩形將對(duì)應(yīng)的矩形設(shè)置為未選中，這樣相當(dāng)于恢復(fù)原狀。然后我們還要把最新的值設(shè)置到中繼器表格里，所以我們用更新行的交互，將中繼器對(duì)應(yīng)列該行的值設(shè)置為該輸入框的值。

背景矩形選中的時(shí)候，我們要把要用一個(gè)默認(rèn)隱藏的文本標(biāo)記記錄那一行的被選中，所以我們用設(shè)置文本的交互，將該行no列的值設(shè)置到記錄no的文本。

記錄這個(gè)文本是為了后面知道在哪里插入行。

如果都沒(méi)有選中，就是取消選中的時(shí)候，我們將記錄文本設(shè)置為中繼器的總行數(shù)，那么后續(xù)插入行就會(huì)在最后一行插入。

所以在中繼器載入時(shí)，我們要用排序的交互，對(duì)no列進(jìn)行排序，這樣后續(xù)插入行就可以根據(jù)插入對(duì)應(yīng)的序號(hào)，控制插入行的位置

3）操作按鈕

包括重新上傳、插入行、復(fù)制行和刪除行按鈕，我們用圖標(biāo)+文字組成。

①插入行按鈕的交互

點(diǎn)擊插入行按鈕時(shí)，我們用更新行的交互，更新選中的行選中行更新條件是目標(biāo)行的no值，大于選中行的no值，例如選中的是第2行，那么第3行及后面的行就都要將序號(hào)+1。然后我們?cè)儆锰砑有械慕换?，添加一行新行，添加的序?hào)就是選中行的序號(hào)+1，例如選中的行是第二行，那添加行的序號(hào)就是3。

②復(fù)制行按鈕的交互

復(fù)制行的交互和插入行的交互基本一致，但是我們要先獲取到選中行各個(gè)的數(shù)據(jù)，所以我們要有多個(gè)默認(rèn)隱藏的文本來(lái)記錄，在中繼器每項(xiàng)加載時(shí)，如果所在行的no值和選中行記錄的no值一致，我們就用設(shè)置文本的交互，將表格的內(nèi)容設(shè)置到對(duì)應(yīng)的文本標(biāo)簽來(lái)記錄。

鼠標(biāo)單擊復(fù)制行按鈕時(shí)，交互和插入行一致，只是添加行的時(shí)候，要將記錄文本的值設(shè)置到中繼器表格里。

③刪除行按鈕的交互

鼠標(biāo)單擊刪除行按鈕時(shí)，我們刪除no列的值等于記錄no文本的行，然后還要用更新行的交互，將序號(hào)大于記錄no文本的行的no列的值等于他原來(lái)的值-1。

④重新上傳按鈕的交互

把所有元件組合轉(zhuǎn)為動(dòng)態(tài)面板，這一頁(yè)就是表格頁(yè)，然后我們新增一些空白頁(yè)，放置在最上方，作為上傳頁(yè)。鼠標(biāo)點(diǎn)擊上傳按鈕時(shí)，我們用設(shè)置面板狀態(tài)的交互，將動(dòng)態(tài)面板設(shè)置到上傳頁(yè)。

2. 上傳頁(yè)面

上傳頁(yè)面我們用矩形+文字+圖標(biāo)組成，如下圖所示擺放：

在里面我們還要準(zhǔn)備需要一個(gè)輸入框，輸入類型選擇文件，后續(xù)通過(guò)js調(diào)用本地文件的彈窗，一個(gè)文本標(biāo)簽命名為text，用于記錄選中文件名，另外一個(gè)文本標(biāo)簽命名為click，只用于后續(xù)觸發(fā)選擇文件后的操作。

鼠標(biāo)單擊上傳組合時(shí)的交互，我們用打開鏈接的交互，選擇鏈接到URL，在里面我們可以通過(guò)js代碼，觸發(fā)輸入框那個(gè)原件點(diǎn)擊的交互，因?yàn)檩斎肟蝾愋驮O(shè)置成文件，所以點(diǎn)擊他就會(huì)彈出本地文件選擇的窗口。在選擇完成后，我們將選中的文件名稱設(shè)置到text的文本標(biāo)簽里，然后click代碼觸發(fā)click元件鼠標(biāo)單擊的交互。之前我在上傳列表的教程里有詳細(xì)的講解，這里就不展開介紹了，不太明白的同學(xué)可以看回我之前的文章。

clic按鈕鼠標(biāo)單擊時(shí)，我們判斷回傳到text文本的文本值是否包含.xls、.xlt、.csv這幾種常用的表格的后綴。

如果不包含，代表上傳的文件類型錯(cuò)誤，彈出彈窗提示用戶重新上傳。

如果包含，就是表格文件，我們用設(shè)置面板狀態(tài)的交互，將動(dòng)態(tài)面板設(shè)置到剛剛做好的表格頁(yè)。

這樣我們就完成了能模擬表格上傳效果的原型模板了，后續(xù)使用也是很方便，默認(rèn)的表格內(nèi)容只需要在中繼器表格里維護(hù)，即可自動(dòng)生成交互效果。

以上就是本期教程的全部?jī)?nèi)容，感興趣的同學(xué)們可以動(dòng)手試試哦，感謝您的閱讀，我們下期見(jiàn)。