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

reclay 发布于2019-08-22 10:35 / 1168人阅读

摘要：组件表格是非常常用的组件，尤其是后台系统。它的制定也是五花八门的。因此有大量的组件，每个都庞大无比，集成各种功能，复杂得像。强大的组件机制就此而生。通常就是一个表头，表头固定。要与分析栏进行联动。

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组件一步步搭建框架一步步搭建物联网系统组件和组件通信

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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