Axure教程：用中繼器做個性化表格

Axure教程：用中繼器做個性化表格Hello，今天作者教大家如何在axure中用中繼器做一個個性化表格。首先什么是個性化表格，為什么需要個性化表格呢？我們先來看看下面這個例子，是關(guān)于股票的一些數(shù)據(jù)，例如市盈率、市凈率、量比、行業(yè)等上百個字段。但是不同的投資者想看的數(shù)據(jù)不一樣，例如張三是價值投資者，非常重視市盈率和市凈率，對于其他的數(shù)據(jù)不太關(guān)心；李四是一個技術(shù)投資者，比較關(guān)心股票的量比、近期漲幅；對市盈率、市凈率的數(shù)據(jù)莫不關(guān)心。這時我們怎么設(shè)計能同時滿足不用用戶的需求呢？這時候就需要用到自定義表格，用戶可以根據(jù)自己的喜好定制個性化列表；例如張三，他可以定制查看市盈率、市凈率等重要的數(shù)據(jù)，這樣就可以滿足不用用戶的需求。原型演示地址：制作教程制作自定義列表作者會使用中繼器來制作，如果你看過我之前的文章都可以發(fā)現(xiàn)，作者會比較喜歡用中繼器來制作原型，因為作者希望以后需要再次使用類型的原型的時候，就不需要重新畫圖制作交互；所以用中繼器來制作，制作完成之后，下次使用時，只需要在中繼器填寫對應(yīng)數(shù)據(jù)就完成了，交互什么的都是由系統(tǒng)自動生成，非常高效。1.用中繼器制作表格1）表格中繼器內(nèi)材料如下圖所示，我們需要幾個矩形，分別為列表標(biāo)題和和數(shù)據(jù)，需要幾行的數(shù)據(jù)就加多少個data；為了美觀，可以填充顏色修改矩形樣式。2）列表中繼器表格內(nèi)容如下圖所示，需要設(shè)置title列和data列，data列取決于有多少行數(shù)據(jù)，然后依次填入對應(yīng)數(shù)據(jù)即可。3）列表中繼器內(nèi)交互設(shè)置每項加載時，設(shè)置title的矩形文本=item.title，data的矩形文本=item.data。2.用中繼器制作表格顯示選項1）選項中繼器內(nèi)材料僅需要多選按鈕：2）選項中繼器表格內(nèi)容需要兩列，一列是title，就是和列表中繼器內(nèi)title數(shù)據(jù)一致即可，另外一列是xuanzhong，用于記錄該選項是否被選中。3）選項中繼器內(nèi)交互設(shè)置設(shè)置復(fù)選框的文本=item.title。設(shè)置復(fù)選框是否選中，我們這里通過中繼器來控制復(fù)選框是否選中；如果item.xuanzhong的數(shù)據(jù)為1，就設(shè)置該行復(fù)選框的狀態(tài)為選中；如果不為1，則不選中。復(fù)選框選中和取消全選事件：當(dāng)復(fù)選框選中時，我們需要更新中繼器，讓中繼器記得該行復(fù)選框被選中，所以是更新該行的item.xuanzhong==1；如果取消選中時，我們更新該行的item.xuanzhong==0即可。記錄選中文字，每項加載時，我們需要記錄選中的文字，我們新建一個文字標(biāo)簽，命名為篩選邏輯；如果xuanzhong==1時，我們讓篩選邏輯加上該行的文字，即篩選邏輯文本=該文本原來的文字+item.title，篩選邏輯默認(rèn)隱藏，制作邏輯處理。觸發(fā)篩選邏輯，當(dāng)中繼器加載完最后一條時，我們要對表格中繼器進(jìn)行篩選，所以需要觸發(fā)篩選邏輯鼠標(biāo)單擊時的事件。篩選邏輯鼠標(biāo)單擊時，我們需要對表格中繼器進(jìn)行篩選，篩選的邏輯就是：篩選邏輯的文本包含列表的標(biāo)題。這里我們需要用indexof函數(shù)進(jìn)行判斷：如果this.text.indexOf(TargetItem.title)>-1，即表明該標(biāo)題已選，顯示。如果如果this.text.indexOf(TargetItem.title)≤-1，即表明該標(biāo)題未選，隱藏。那到這里就制作完成了，完成之后我