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

时间 2021-02-13

标签 javascript html java git github dom this spa code component 栏目 JavaScript 繁體版

原文原文链接

grid组件（表格）是很是经常使用的组件，尤为是后台系统。它的制定也是五花八门的。所以jQuery有大量的grid组件，每一个都庞大无比，集成各类功能，复杂得像Excel。但即使是这样，咱们的产品经理老是能提出一些需求，让你死去活来。所以有时咱们不须要一个功能丰富的grid，而是一个扩展性极好的grid。javascript

avalon2强大的组件机制就此而生。html

咱们分析一下grid的结构。一般就是一个表头，表头固定。表身，放数据。表尾，老是一个分页栏或是汇总栏。所以，咱们的grid写成这样就好了，其余都使用slot传进来，其可制性极强。java

avalon.component('ms-grid', {
    template: heredoc(function () {
        /*
         <div class="grid">
         <div><slot name="header"/></div>
         <div><slot name="tbody"/></div>
         <div class="pager"><slot name="pager" /></div>
         </div>
         */
    }),
    defaults: {  }
 })

分页栏，咱们使用以前的分析就行了。因而组件容器里写成这样：git

<xmp :widget="{is:'ms-grid'}">
        <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}" />
</xmp>

对于这个grid自己而言，最难的部分就是使用limitBy与selectBy这两个过滤器。limitBy要与分析栏进行联动。selectBy要与表头联动。github

而后咱们加一点随机数据与样式吧。dom

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src='../../dist/avalon.js'></script>
        <script>
            function heredoc(fn) {
                return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
                        replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
            }
            avalon.component('ms-grid', {
                template: heredoc(function () {
                    /*
                     <div class="grid">
                     <div><slot name="header"/></div>
                     <div><slot name="tbody"/></div>
                     <div class="pager"><slot name="pager" /></div>
                     </div>
                     */
                }),
                defaults: {  }
            })

            function genData(n) {
                var list = []
                for (var i = 0; i < n; i++) {
                    list.push({
                        aaa: new Date - i,
                        bbb: Math.random().toString(32).replace(/0\./, ""),
                        ccc: (Math.random() + "").replace(/0\./, ""),
                        ddd: i
                    })
                }
                return list
            }
            var vm = avalon.define({
                $id: 'widget1',
                header: ['aaa','bbb','ccc'],
                start: 0,
                count: 10,
                data: genData(300),
                aaa: function (e) {
                    e.vmodel.$watch('currentPage', function (a) {
                        vm.start = a - 1
                        console.log(vm.start)
                    })
                },
                ddd: 'bbb'
            })

            avalon.component("ms-pager", {
                template: heredoc(function(){
                    /*
                      <div class="pagination">
                        <ul>
                        <li :for="el in @pages" 
                           :class="[ el == @currentPage && 'active' ]">
                           <a href="javascript:void(0)" :click="@gotoPage(el, $event)">{{el}}</a>
                        </li>
                        </ul>
                      </div>
                     */
                }),
                defaults: {
                    totalPage: 25,
                    currentPage: 1,
                    showPage: 7,
                    pages: [1, 2, 3, 4, 5, 6, 7],
                    gotoPage: function (page, e) {
                        this.currentPage = page;
                        this.pages = this.getPages();
                    },
                    getPages: function () {
                        var pages = [];
                        var s = this.showPage, l = this.currentPage, r = this.currentPage, c = this.totalPage;
                        pages.push(l);
                        while (true) {
                            if (pages.length >= s) {
                                break;
                            }
                            if (l > 1) {
                                pages.unshift(--l);
                            }
                            if (pages.length >= s) {
                                break;
                            }
                            if (r < c) {
                                pages.push(++r);
                            }
                        }

                        return pages;
                    }
                }
            });
        </script>
    </head>
    <body>
        <style>
            .header {
                border:1px solid #000;
                width: 600px;
                border-collapse: collapse;
            }
            .header td{
                border:1px solid #000;
                text-align: center;
                font-weight: 700;
                height:30px;
                color: #607fa6;
                font-weight: 700;
            }
            .tbody{
                width: 600px;
                margin-top: -1px;
                border:1px solid #000;
                border-collapse: collapse;
            }
            .tbody td{
                border:1px solid #000;
                height: 30px;
            }
           
            .pagination ul{
                list-style: none;
                margin: 0;
                padding: 0;
            }
            .pagination li{
                float: left;
            }
            .pagination li a{
                text-decoration: none;
                display: inline-block;
                width:40px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                background: #fafafa;
                color:#000;
               
            }
            .pagination .active a{
                background: #009a61;
                color:#fff;
            }
            .pager{
                width:600px;
                background: #fafafa;
            }
            .pager > *{
                float: right;
                
            }
        </style>
        <div ms-controller='widget1' >

        <xmp :widget="{is:'ms-grid'}">
                <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}" />
        </xmp>

    </div>

</body>
</html>

你们能够到这里下到它的源码this