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

reclay 發(fā)布于2019-08-22 10:35 / 1176人閱讀

摘要：組件表格是非常常用的組件，尤其是后臺(tái)系統(tǒng)。它的制定也是五花八門的。因此有大量的組件，每個(gè)都龐大無(wú)比，集成各種功能，復(fù)雜得像。強(qiáng)大的組件機(jī)制就此而生。通常就是一個(gè)表頭，表頭固定。要與分析欄進(jìn)行聯(lián)動(dòng)。

grid組件（表格）是非常常用的組件，尤其是后臺(tái)系統(tǒng)。它的制定也是五花八門的。因此jQuery有大量的grid組件，每個(gè)都龐大無(wú)比，集成各種功能，復(fù)雜得像Excel。但即便是這樣，我們的產(chǎn)品經(jīng)理總是能提出一些需求，讓你死去活來(lái)。因此有時(shí)我們不需要一個(gè)功能豐富的grid，而是一個(gè)擴(kuò)展性極好的grid。

avalon2強(qiáng)大的組件機(jī)制就此而生。

我們分析一下grid的結(jié)構(gòu)。通常就是一個(gè)表頭，表頭固定。表身，放數(shù)據(jù)。表尾，總是一個(gè)分頁(yè)欄或是匯總欄。因此，我們的grid寫成這樣就行了，其他都使用slot傳進(jìn)來(lái)，其可制性極強(qiáng)。

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

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


        <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}" />

對(duì)于這個(gè)grid本身而言，最難的部分就是使用limitBy與selectBy這兩個(gè)過(guò)濾器。limitBy要與分析欄進(jìn)行聯(lián)動(dòng)。selectBy要與表頭聯(lián)動(dòng)。

然后我們加一點(diǎn)隨機(jī)數(shù)據(jù)與樣式吧。




    
        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}" />

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