一步步编写avalon组件04：GRID组件

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要与表头联动。

然后我们加一点随机数据与样式吧。

    
        
        
        
        
        
    
    
        
        


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

    

大家可以到这里下到它的源码