一步步編寫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>