中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在學習了本文的中繼器表格之后，你將會十分完美地解決原生表格組件覆蓋不到的功能區。一起來看。

表格應該是我們非常熟悉的一種數據格式了，在實際開發中，它也是作為系統的一個組件之一在各種場景中頻繁出現。

在我看來，表格設計在產品原型的中的功能主要有兩個：

1. 數據陳列。展示一組（全量）真實數據，方便溝通過程中需求雙方對真實業務場景的理解。
2. 數據模擬。作為產品交互組件的一部分，展示結構及交互樣式，主要是表現系統原型的統一性及協調性。

AxuerRP為我們提供的表格組件，可以較為效率地解決“數據陳列”問題（兼容一般格式的excel單元格復制粘貼），以及基本滿足“數據模擬”中對表格樣式及交互的要求，但是在大部分系統的細分場景下面，原生表格組件對“數據模擬”功能的實現略顯疲軟，如果你只懂的原生組件來做表格，那么你做的表格大概都長這樣：

有問題嗎？是的，樣子雖然簡單了點，但問題不大。

但是，如果你遇到了比如以下這兩個需求呢？

• 需求1：實現一個橫邊框的表格。
• 需求2：鼠標懸停表格的某一行，表格整行高亮顏色（或觸發其他交互）：

我想，除了拿著矩形在那拼半天，或是在excel制作完貼圖，確實也沒什么更好的辦法了…

看完本篇，你將輕松實現以下效果：

回到正題，總的來說，axure8.0原生表格的使用特點是：

樣式/交互的編輯的粒度是單元格，而即使是單元格，樣式設計也有很大的局限性（比如不支持部分邊框）

我們都知道，表格是一種行列相對固定的數據格式，在日常excel編輯中，我們常常都對數據中的某一行/列，進行編輯，再應用到全局表格中，而在系統原型的使用場景中，我們也常常依賴于對行的樣式控制，那么在原生表格覆蓋不到的場景之下，我們應該怎樣實現這些需求呢？

本節介紹的中繼器表格，將會十分完美地解決原生表格組件覆蓋不到的功能區。

本節目錄

1. 基礎中繼器表格
2. 表格的行級別交互
3. 表格的數據分頁
4. 表格的數據搜索
5. 表格的增刪改

1.基礎中繼器表格

在上一節的介紹中，我們把“中繼器”比喻成“模版”，通過對模版的修改，達到行級別的樣式重復，通過對數據的標準化填充，實現組件數據的批量修改。

其實，中繼器的數據結構本身已經是一個表格了，而用中繼器來重寫原生表格，只不過為中繼器設計一件好看的衣服而已。

我們知道，中繼器的迭代單位是“行”，而看表格的結構，也是縱橫交錯的行列構成，而每一行里面有若干個單元格。下面我們來看一個最基礎的中繼器表格是怎么實現的。

首先我們在axure里面創建一個中繼器，雙擊中繼器，用以下四個矩形替代默認的矩形。

再回到頁面，我們將看到以下效果：

一個4列N行的表格結構已經搭建完成，我們只需要將“中繼器每項加載時”的交互設置“矩形內容=中繼器數據”，并在中繼器填充數據，就可以完成表格數據的編輯。

回到頁面，我們可以看到數據已經更新了：

這就是中繼器改寫的基礎表格，下面，我們來看這樣子的基礎表格的各種玩法。

2.表格的行級別交互

a.橫邊框表格

這個大家應該一眼就看明白（雖然原生表格摔破頭也無法實現的），僅需要在中繼器內的單元格增加下邊框就行了，需要注意的一點是，中繼器式表格的表頭需要單獨制作，建議大家處理完中繼器內的樣式之后，copy一份出來單獨編輯即可。

b.條紋表格

條紋表格，原理上是通過奇偶數行樣式的控制來實現區隔色效果，在中繼器中，剛好有“isEven”（是否偶數行）“isOdd”（是否奇數行）來幫我們進行判斷，而我們只需要在中繼器“每項加載時”加入條件，進行分別設置即可。

c.懸停高亮

這個就留給大家思考啦，相信懂了a跟b之后，這樣的樣式已經沒什么難度，需要留意的是，如果不增加bg層，而直接對單元格進行編組設置的同學，務必要對分組勾選“允許觸發鼠標交互”復選框，否則鼠標懸停行之后就只能觸發單元格的樣式改變咯（當然這也有合適的使用場景）

3.表格的數據分頁

上一節中我們在日期控件的制作過程中已經介紹了中繼器對數據的縱橫排列。

除了排列之外，中繼器還支持數據分頁，包括上下翻頁、頁碼跳頁等等，這功能就強大了，能完全模擬我們系統中的翻頁，并且能有效兼容數據溢出。我們先看看demo。

分頁的實現分數據分頁及分頁控制兩部分，數據分頁我們僅須勾選中繼器樣式里面的分頁設置，并配置頁數和起始頁就可以了。

頁面控制部分，涉及到兩個觸發效果，“當前頁面”和“每頁頁數”。當前頁面的配置包括“上一頁”“下一頁”“頁數跳轉”，axure提供的添加動作里已經囊括。

每頁頁數也是axure提供的交互動作之一，配置也是比較簡單，我們只要配置點擊選項觸發就ok了。

中繼器分頁功能絕不僅限于表格應用，像我們上一期做的日期控件基本版，其實也可以通過分頁來實現全年版，數年版等等，大家感興趣的話可以去嘗試以下。

4.表格的數據搜索

什么是數據篩選？我的理解是數據的搜索條件，我們在表單使用過程中常常使用下拉框、文本框等控件進行搜索，而中繼器的數據篩選功能，可以完美地迎合我們的搜索需求，當然僅限于“精準匹配”（模糊匹配不支持），至于排序，就是按字段索引條件對記錄進行順序變更，我們來看看demo。

Demo中涉及的交互動作有“中繼器-添加排序”“中繼器-移除排序”“中繼器-添加篩選”“中繼器-移除篩選”，我們下面演示添加排序及添加篩選，其他兩個類比可實現。

5.表格的增刪改

我們知道，中繼器數據的來源是我們在中繼器“屬性”tab中看到的這張表格，所謂的增刪改，就是通過axure提供的動作，來增加、修改、刪除這張表里面的內容。

這里主要講解添加行，刪除行、更新行由于涉及到“標記”與條件，我們放到下一節的綜合案例中來具體鋪陳。

其實中繼器的數據的“添加”功能，大部分的應用場景是我們對中繼器記錄的簡單“復制”，并且這種復制大多數情況下是跟數據沒有關系的，比如下面這個demo。

這個例子中，點擊添加，我們僅須觸發一個新的記錄空行而已，動作的配置也非常簡單。

在添加行的配置中，我們只是設置了一個1，因為我們僅需實現元件的復制，如果想要通過其他字段的信息來添加新行，那么就需要用到變量來進行中轉保存了，大家來看下面這個元件，它就是“增加”“刪除”“標記”“取消標記”“變量”功能的綜合應用，我們將在下節內容中繼續講解！

本節相關demo源碼已經更新百度網盤，有需要的同學可以下載查看~

本文由 @kache0123 原創發布于人人都是產品經理?，未經許可，禁止轉載。

題圖來自?PEXELS，基于 CC0 協議