一步步編寫avalon組件05：樹組件

時間 2019-12-07

標籤步步編寫 avalon 組件简体版

原文原文鏈接

給人印象中，樹組件是很是使人畏懼的一個組件，超級複雜，超級難寫。但使用avalon2來作，這倒是級其簡單的一件事。首先從樣式入作，無序列表是自然可用的樹結構，幾個UL元素套在一塊兒，它們就天然處理好縮進問題。換言之，咱們用UL元素做爲樹的節點，那麼樹組件內部也須要存在樹組件，須要造成遞歸結構。avalon2的slot機制又是出場的時候了。html

所以咱們的樹的結構大概是spa

樹
   子樹
   子樹
       子樹

此外，樹擁有還有摺疊子樹的功能，這好辦，咱們使用ms-visible實現隱藏顯示子樹。經過ms-click來爲ms-visible傳參。設計

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../dist/avalon.js"></script>
    </head>
    <body>
        <blockquote>
            <div ms-controller="tree">
                <wbr ms-widget="{is:'tree',tree: @data}" />
            </div>
            <script>
                function heredoc(fn) {
                    return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
                            replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
                }
                var treeID = 0
                avalon.component('tree', {
                    template: heredoc(function () {
                        /*
                         <ul>
                         <li ms-for="(index, el) in @tree | get(0)">{{el.text}}
                         <span ms-click='@openSubTree(el)' ms-text="@changeIcon(el)"></span>
                         <div ms-visible="el.open" ms-html="@renderSubTree(el)">
                         
                         </div>
                         </li>
                         </ul>
                         */
                    }),
                    defaults: {
                        tree: [],
                        renderSubTree: function (el) {
                            return  el.subtree.length ? '<wbr ms-widget="{is:"tree", $id:"tree_' + (++treeID) + '", tree: el.subtree}" />' : ''
                        },
                        openSubTree: function (el) {
                            el.open = !el.open
                        },
                        changeIcon: function (el) {
                            return el.open && el.subtree.length ? '[-]' : '[+]'
                        }
                    }
                })


                avalon.define({
                    $id: "tree",
                    data: [
                        {text: "aaa", open: 1, subtree: [
                                {text: 1111, open: 1, subtree: []},
                                {text: 2222, open: 1, subtree: [
                                        {text: 777, open: 1, subtree: []}
                                    ]},
                                {text: 3333, open: 1, subtree: [
                                        {text: 8888, open: 1, subtree: []},
                                        {text: 9999, open: 1, subtree: [
                                                {text: '司徒正美', open: 1, subtree: []}
                                            ]}
                                    ]}
                            ]},
                        {text: "bbb", open: 1, subtree: [
                                {text: 4444, open: 1, subtree: []},
                                {text: 5555, open: 1, subtree: []},
                                {text: 6666, open: 1, subtree: []}
                            ]},
                        {text: "ccc", open: 1, subtree: []},
                        {text: "ddd", open: 1, subtree: []},
                        {text: "eee", open: 1, subtree: [
                                {text: 1234, open: 1, subtree: []}
                            ]},
                        {text: "fff", open: 1, subtree: []}
                    ]

                })
            </script>
        </blockquote>


    </body>
</html>

看，咱們的樹組件一會兒就出來，雖然看起來很是樸素，但的確是樹，若是找設計師美化一下，添加些好看的ICON，徹底是ztree沒有什麼兩樣。固然咱們也能夠照搬ztree的圖標。最重要的，代碼太少了，維護起來超方便。code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。