樹形組件是一種具有層級結構的組件，廣泛應用于各種場景。本章會實現一個簡單的樹形組件，盡管功能有限，但你可以通過擴展它來實現自己所需要的樹形組件。
數據源
樹形組件的數據源可以是 JSON 格式的數據對象，也可以是具有 XML 結構的數據或者是其它的具有層級結構的數據。本章將采用具有如下 JSON 格式的數據對象。
var data = { name: 'My Tree', children: [ { name: 'hello' }, { name: 'world' }, { name: 'child folder', children: [ { name: 'alice' } ] } ]};上述數據源中，name 值會作為樹結點的名稱顯示，含 children 的數組代表節點的子級。
遞歸結構的設計
由 HTML 中的列表元素 ul 以及 li 組合而成對象具有天然的樹形結構，我們不妨采用它們作為構建樹形組件的基本元素。樹形組件的最外層必然是一個 ul 元素，所以我們可以暫時定義樹形組件如下：
Tree: { xml: `<ul id='tree'> <Item id='item'/> </ul>`}這里的未定義的組件 Item 是一個需要遞歸定義的子項組件，它會根據提供的數據遞歸地生成子孫對象。下面是一種可能的設計：
Item: { xml: `<li id='item'> <div id='content'> <span id='neme'/><span id='expand'/> </div> <ul id='entries'/> </li>`, map: { defer: "entries" }}注意，上面的 neme 對象是用于顯示 name 屬性的。expand 對象用于展開或者關閉子級對象 entries。子級對象 entries 被設置為需要延遲實例化，只有當用戶點擊 expand 對象展開子級時，該對象才會實例化。
數據的加載與渲染
如上一節所述，我們設定了子級對象 entries 需要延遲實例化。所以，在給子項 Item 提供的數據設置接口不應該立馬對 entries 實例化。下面我們先給出數據接口函數。
Item: { // css, xml, map 項同上 fun: function (sys, items, opts) { var data; function val(value) { data = value; sys.neme.text(data.name); data.children && data.children.length && sys.expand.show().text(" [+]"); } return { val: val }; }}該接口函數 val 只是設置了當前節點相關的內容。下面我們來偵聽 expand 對象的點擊事件，并適時地完成組件對象 entries 的實例化。
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.entries.show() && load()) : sys.entries.hide(); }); function load() { if ( sys.entries.children().length == 0 ) for ( var item of data.children ) sys.add.before("Item").value().val(item); } function val(value) { data = value; sys.neme.text(data.name); data.children && data.children.length && sys.expand.show().text(" [+]"); } return { val: val }; }}上述代碼中包含一個 open 參數，該參數記錄了當前節點的是否處于展開狀態以供相關的偵聽器使用。
動態添加節點
現在我們對上述組件進行一個小的擴展，使得它支持動態添加樹節點的功能。首先，我們在對象 entries 的子級添加一個觸發按鈕，并命名為 add。
Item: { xml: "<li id='item'> <div id='content'> <span id='neme'/><span id='expand'/> </div> <ul id='entries'> <li id='add'>+</li> </ul> </li>", map: { defer: "entries" }}其次，需要偵聽 add 對象的點擊事件，在偵聽器中完成對象的添加。
Item: { // css, xml, map 項同前 fun: function (sys, items, opts) { var data, open; sys.item.on("click", "http://*[@id='add']", function () { var stuff = {name: 'new stuff'}; data.children.push(stuff); sys.add.before("Item").value().val(stuff); }); // 其余代碼同前 }}這里需要注意，對 add 對象的偵聽不能采取直接式的偵聽：sys.add.on("click",...)，而應該使用代理的方式，否則會報錯。因為其父級屬于延遲實例化的組件，在 entries 對象未實例化之間，add 對象并不可見。
完整的樹形組件
綜合以上的內容，現在給出一個完整版本的樹形組件：
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; }},Item: { css: "#item { cursor: pointer; }", xml: `<li id='item'> <div id='content'> <span id='neme'/><span id='expand'/> </div> <ul id='entries'> <li id='add'>+</li> </ul> </li>`, map: { defer: "entries" }, fun: function (sys, items, opts) { var data, open; sys.item.on("click", "http://*[@id='add']", function () { var stuff = {name: 'new stuff'}; data.children.push(stuff); sys.add.before("Item").value().val(stuff); }); sys.expand.on("click", function () { open = !open; sys.expand.text(open ? " [-]" : " [+]"); open ? (sys.entries.show() && load()) : sys.entries.hide(); }); function load() { if ( sys.entries.children().length == 1 ) for ( var item of data.children ) sys.add.before("Item").value().val(item); } function val(value) { data = value; sys.neme.text(data.name); data.children && data.children.length && sys.expand.show().text(" [+]"); } return { val: val }; }}在實際應用中的樹形組件會比這里的功能更豐富些，你可以在上述代碼的基礎上進一步的改進，比如添加些 ICON 圖標、讓子項成為可拖動的等等。但在改進過程中盡量避免代碼的復雜化，適當地剝離些代碼出來封裝成組件是非常有必要的。
本系列文章基于 xmlplus 框架。如果你對 xmlplus 沒有多少了解，可以訪問 www.xmlplus.cn。這里有詳盡的入門文檔可供參考。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
