一步步編寫avalon組件04：GRID組件

reclay 發布于2019-08-22 10:35 / 1170人閱讀

摘要：組件表格是非常常用的組件，尤其是后臺系統。它的制定也是五花八門的。因此有大量的組件，每個都龐大無比，集成各種功能，復雜得像。強大的組件機制就此而生。通常就是一個表頭，表頭固定。要與分析欄進行聯動。

grid組件（表格）是非常常用的組件，尤其是后臺系統。它的制定也是五花八門的。因此jQuery有大量的grid組件，每個都龐大無比，集成各種功能，復雜得像Excel。但即便是這樣，我們的產品經理總是能提出一些需求，讓你死去活來。因此有時我們不需要一個功能豐富的grid，而是一個擴展性極好的grid。

avalon2強大的組件機制就此而生。

我們分析一下grid的結構。通常就是一個表頭，表頭固定。表身，放數據。表尾，總是一個分頁欄或是匯總欄。因此，我們的grid寫成這樣就行了，其他都使用slot傳進來，其可制性極強。

avalon.component("ms-grid", {
    template: heredoc(function () {
        /*
         
         
         
         
         
         */
    }),
    defaults: {  }
 })

分頁欄，我們使用之前的分析就好了。于是組件容器里寫成這樣：


        <table slot="header" class="header">
            <tr>
                <td :for="el in @header" style="width:200px" >
                    {{el}}
            </td>
        </tr>
    </table>
    <table slot="tbody" class="tbody">
        <tr :for="obj in @data |limitBy(@count, @start)">
            <td :for="el in obj | selectBy(@header)" style="width:200px">{{el}}</td>
        </tr>
    </table> 
    <ms-pager slot="pager" :widget="{onReady:@aaa}" />

對于這個grid本身而言，最難的部分就是使用limitBy與selectBy這兩個過濾器。limitBy要與分析欄進行聯動。selectBy要與表頭聯動。

然后我們加一點隨機數據與樣式吧。




    
        TODO supply a title
        
        
        
        
    
    
        
        

        
                <table slot="header" class="header">
                    <tr>
                        <td :for="el in @header" style="width:200px" >
                            {{el}}
                    </td>
                </tr>
            </table>
            <table slot="tbody" class="tbody">
                <tr :for="obj in @data |limitBy(@count, @start)">
                    <td :for="el in obj | selectBy(@header)" style="width:200px">{{el}}</td>
                </tr>
            </table> 
            <ms-pager slot="pager" :widget="{onReady:@aaa}" />

大家可以到這里下到它的源碼

云服務器 GPU云服務器 Grid組件一步步搭建框架一步步搭建物聯網系統組件和組件通信

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90888.html

一步步編寫avalon組件03：切換卡組件

摘要：那么組件容器是被誰替換呢當然是組件。我們使用來定義組件時，必須有一個屬性，它是一個模塊，它會轉換為組件。一個組件可以擁有個元素，它們的值不能重復。好了，我們看一下切換卡是如何做的。本章開始介紹slot機制。 slot是WEBComponent引進的東西，叫做插槽。在瀏覽器中，它為一個content元素。不過有資料表明，它會更名為slot。并且在其他語言的模板引擎中，slot標簽更為...

kbyyd24 2019-08-22 10:35 評論0 收藏0
一步步編寫avalon組件05：樹組件

摘要：給人印象中，樹組件是非常令人畏懼的一個組件，超級復雜，超級難寫。但使用來做，這卻是級其簡單的一件事。換言之，我們用元素作為樹的節點，那么樹組件內部也需要存在樹組件，需要形成遞歸結構。的機制又是出場的時候了。給人印象中，樹組件是非常令人畏懼的一個組件，超級復雜，超級難寫。但使用avalon2來做，這卻是級其簡單的一件事。首先從樣式入做，無序列表是天然可用的樹結構，幾個UL元素套在一起，...

Ocean 2019-08-22 10:35 評論0 收藏0
《從零構建前后分離的web項目》：前端了解過關了嗎？

摘要：前端基礎架構和硬核介紹技術棧的選擇首先我們構建前端架構需要對前端生態圈有一切了解，并且最好帶有一定的技術前瞻性，好的技術架構可能日后會方便的擴展，減少重構的次數，即使重構也不需要大動干戈，我通常選型技術棧會參考以下三點一提出自身業務的需求是 # 前端基礎架構和硬核介紹 showImg(https://segmentfault.com/img/remote/146000001626972...

lbool 2019-08-23 11:44 評論0 收藏0
《從零構建前后分離的web項目》：前端了解過關了嗎？

摘要：前端基礎架構和硬核介紹技術棧的選擇首先我們構建前端架構需要對前端生態圈有一切了解，并且最好帶有一定的技術前瞻性，好的技術架構可能日后會方便的擴展，減少重構的次數，即使重構也不需要大動干戈，我通常選型技術棧會參考以下三點一提出自身業務的需求是 # 前端基礎架構和硬核介紹 showImg(https://segmentfault.com/img/remote/146000001626972...

cgspine 2019-08-19 11:06 評論0 收藏0
《從零構建前后分離的web項目》：前端了解過關了嗎？前端基礎架構和硬核介紹

摘要：前端準備前端了解過關了嗎前端基礎架構和硬核介紹技術棧的選擇首先我們構建前端架構需要對前端生態圈有一切了解，并且最好帶有一定的技術前瞻性，好的技術架構可能日后會方便的擴展，減少重構的次數，即使重構也不需要大動干戈，我通常選型技術棧會參考以下三 # 前端準備：前端了解過關了嗎？前端基礎架構和硬核介紹 showImg(https://segmentfault.com/img/remote/...

SwordFly 2019-08-29 16:37 評論0 收藏0