JavaScript框架（xmlplus）元件的介紹（九）樹（Tree）

xmlplus 是一個JavaScript框架，用於快速開發前後端專案。這篇文章主要介紹了xmlplus元件設計系列之tree，具有一定的參考價值，有興趣的小夥伴們可以參考一下

樹形元件是一種具有層級結構的元件，廣泛應用於各種場景。本章會實作一個簡單的樹形元件，儘管功能有限，但你可以透過擴展它來實現自己所需的樹形元件。

資料來源

字型元件的資料來源可以是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=&#39;tree&#39;>
   <Item id=&#39;item&#39;/>
   </ul>`
}

這裡的未定義的元件Item 是一個需要遞歸定義的子項元件，它會根據提供的資料遞歸地產生子孫物件。下面是一個可能的設計：

Item: {
 xml: `<li id=&#39;item&#39;>
   <p id=&#39;content&#39;>
    <span id=&#39;neme&#39;/><span id=&#39;expand&#39;/>
   </p>
   <ul id=&#39;entries&#39;/>
   </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=&#39;item&#39;>
   <p id=&#39;content&#39;>
    <span id=&#39;neme&#39;/><span id=&#39;expand&#39;/>
   </p>
   <ul id=&#39;entries&#39;>
    <li id=&#39;add&#39;>+</li>
   </ul>
   </li>",
 map: { defer: "entries" }
}

其次，需要偵聽 add 物件的點擊事件，在偵聽器中完成物件的新增。

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().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=&#39;tree&#39;>
   <Item id=&#39;item&#39;/>
   </ul>`,
 fun: function (sys, items, opts) {
  return items.item;
 }
},
Item: {
 css: "#item { cursor: pointer; }",
 xml: `<li id=&#39;item&#39;>
   <p id=&#39;content&#39;>
    <span id=&#39;neme&#39;/><span id=&#39;expand&#39;/>
   </p>
   <ul id=&#39;entries&#39;>
    <li id=&#39;add&#39;>+</li>
   </ul>
   </li>`,
 map: { defer: "entries" },
 fun: function (sys, items, opts) {
  var data, open;
  sys.item.on("click", "//*[@id=&#39;add&#39;]", function () {
   var stuff = {name: &#39;new stuff&#39;};
   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。這裡有詳盡的入門文件可供參考。

【相關推薦】

1. 免費js線上影片教學

2. JavaScript中文參考手冊

3. php.cn獨孤九賤（3）－JavaScript影片教學

以上是JavaScript框架（xmlplus）元件的介紹（九）樹（Tree）的詳細內容。更多資訊請關注PHP中文網其他相關文章！