xmlplus 組件設計系列之九 - 樹（Tree）

樹

樹形組件是一種具備層級結構的組件，普遍應用於各類場景。本章會實現一個簡單的樹形組件，儘管功能有限，但你能夠經過擴展它來實現本身所須要的樹形組件。

<img src="http://xmlplus.cn/img/tree.png" class="img-responsive"/>

數據源

樹形組件的數據源能夠是 JSON 格式的數據對象，也能夠是具備 XML 結構的數據或者是其它的具備層級結構的數據。本章將採用具備以下 JSON 格式的數據對象。

// 09-01
{
    name: 'My Tree',
    children: [
        { name: 'hello' },
        { name: 'world' },
        { name: 'child folder', children: [{ name: 'alice' }]}
    ]
};

上述數據源中，name 值會做爲樹結點的名稱顯示，含 children 的數組表明節點的子級。

遞歸結構的設計

由 HTML 中的列表元素 ul 以及 li 組合而成對象具備自然的樹形結構，咱們不妨採用它們做爲構建樹形組件的基本元素。樹形組件的最外層必然是一個 ul 元素，因此咱們能夠暫時定義樹形組件以下：

// 09-01
Tree: {
    xml: `<ul id='tree'>
            <Item id='item'/>
          </ul>`
}

這裏的未定義的組件 Item 是一個須要遞歸定義的子項組件，它會根據提供的數據遞歸地生成子孫對象。下面是一種可能的設計：

// 09-01
Item: {
    xml: `<li id='item'>
            <div id='content'>
              <span id='neme'/><span id='expand'/>
            </div>
            <ul id='children'/>
          </li>`,
    map: { defer: "children" }
}

注意，上面的 neme 對象是用於顯示 name 屬性的。expand 對象用於展開或者關閉子級對象 entries。子級對象 children 被設置爲須要延遲實例化，只有當用戶點擊 expand 對象展開子級時，該對象纔會實例化。

數據的加載與渲染

如上一節所述，咱們設定了子級對象 children 須要延遲實例化。因此，在給子項 Item 提供的數據設置接口不該該立馬對 children 實例化。下面咱們先給出數據接口函數。

// 09-01
Item: {
    // css, xml, map 項同上
    fun: function (sys, items, opts) {
        var data;
        return function (value) {
            data = value;
            sys.neme.text(data.name);
            data.children && data.children.length && sys.expand.show().text(" [+]");
        };
    }
}

該接口函數只是設置了當前節點相關的內容。下面咱們來偵聽 expand 對象的點擊事件，並適時地完成組件對象 children 的實例化。

// 09-01
Item: {
    // css, xml, map 項同上
    fun: function (sys, items, opts) {
        var data, open;
        sys.expand.on("click", function () {
            open = !open;
            sys.expand.text(open ? " [-]" : " [+]");
            open ? (sys.children.show() && load()) : sys.children.hide();
        });
        function load() {
            if ( sys.children.children().length == 0 )
              for ( var item of data.children )
                sys.add.before("Item").value()(item);
        }
        return function (value) {
            data = value;
            sys.neme.text(data.name);
            data.children && data.children.length && sys.expand.show().text(" [+]");
        };
    }
}

上述代碼中包含一個 open 參數，該參數記錄了當前節點的是否處於展開狀態以供相關的偵聽器使用。

動態添加節點

如今咱們對上述組件進行一個小的擴展，使得它支持動態添加樹節點的功能。首先，咱們在對象 children 的子級添加一個觸發按鈕，並命名爲 add。

// 09-01
Item: {
    xml: `<li id='item'>
            <div id='content'>
              <span id='neme'/><span id='expand'/>
            </div>
            <ul id='children'>
              <li id='add'>+</li>
            </ul>
          </li>`,
    map: { defer: "children" }
}

其次，須要偵聽 add 對象的點擊事件，在偵聽器中完成對象的添加。

// 09-01
Item: {
    // css, xml, map 項同前
    fun: function (sys, items, opts) {
        var data, open;
        sys.item.on("click", "//*[@id='add']", function () {
            var stuff = {name: 'new stuff'};
            data.children.push(stuff);
            sys.add.before("Item").value()(stuff);
        });
        // 其他代碼同前
    }
}

這裏須要注意，對 add 對象的偵聽不能採起直接式的偵聽：sys.add.on("click",...)，而應該使用代理的方式，不然會報錯。由於其父級屬於延遲實例化的組件，在 children 對象未實例化之間，add 對象並不可見。

完整的樹形組件

綜合以上的內容，如今給出一個完整版本的樹形組件，下面先給出的是樹組件的子項組件：

// 09-01
Item: {
    css: "#item { cursor: pointer; }",
    xml: `<li id='item'>
            <div id='content'>
              <span id='neme'/><span id='expand'/>
            </div>
            <ul id='children'>
              <li id='add'>+</li>
            </ul>
          </li>`,
    map: { defer: "children" },
    fun: function (sys, items, opts) {
        var data, open;
        sys.item.on("click", "//*[@id='add']", function () {
            var stuff = {name: 'new stuff'};
            data.children.push(stuff);
            sys.add.before("Item").value()(stuff);
        });
        sys.expand.on("click", function () {
            open = !open;
            sys.expand.text(open ? " [-]" : " [+]");
            open ? (sys.children.show() && load()) : sys.children.hide();
        });
        function load() {
            if ( sys.children.children().length == 1 )
              for ( var item of data.children )
                sys.add.before("Item").value()(item);
        }
        return function (value) {
            data = value;
            sys.neme.text(data.name);
            data.children && data.children.length && sys.expand.show().text(" [+]");
        };
    }
}

其次給出樹組件。在實際應用中的樹形組件會比這裏的功能更豐富些，你能夠在上述代碼的基礎上進一步的改進，好比添加些 ICON 圖標、讓子項成爲可拖動的等等。但在改進過程當中儘可能避免代碼的複雜化，適當地剝離些代碼出來封裝成組件是很是有必要的。

// 09-01
Tree: {
    css: `#tree { font-family: Menlo, Consolas, monospace; color: #444; }
          #tree, #tree ul { padding-left: 1em; line-height: 1.5em; list-style-type: dot; }`,
    xml: `<ul id='tree'>
            <Item id='item'/>
          </ul>`,
    fun: function (sys, items, opts) {
        return items.item;
    }
}

測試

咱們最後給出一個測試用例。該例子的測試數據與本章開始給出的數據一致。

Index: {
    xml: "<Tree id='tree' xmlns='tree'/>",
    fun: function (sys, items, opts) {
        items.tree({
            name: 'My Tree',
            children: [
                { name: 'hello' },
                { name: 'world' },
                { name: 'child folder', children: [{ name: 'alice' }]}
            ]
        });
    }
}