快捷導(dǎo)航

xmlplus組件設(shè)計(jì)系列之樹(shù)（Tree）（9）

更新時(shí)間：2017年05月02日 15:50:04 作者：qudou

xmlplus 是一個(gè)JavaScript框架，用于快速開(kāi)發(fā)前后端項(xiàng)目。這篇文章主要介紹了xmlplus組件設(shè)計(jì)系列之tree，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

樹(shù)形組件是一種具有層級(jí)結(jié)構(gòu)的組件，廣泛應(yīng)用于各種場(chǎng)景。本章會(huì)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的樹(shù)形組件，盡管功能有限，但你可以通過(guò)擴(kuò)展它來(lái)實(shí)現(xiàn)自己所需要的樹(shù)形組件。

數(shù)據(jù)源

樹(shù)形組件的數(shù)據(jù)源可以是 JSON 格式的數(shù)據(jù)對(duì)象，也可以是具有 XML 結(jié)構(gòu)的數(shù)據(jù)或者是其它的具有層級(jí)結(jié)構(gòu)的數(shù)據(jù)。本章將采用具有如下 JSON 格式的數(shù)據(jù)對(duì)象。

var data = {
 name: 'My Tree',
 children: [
 { name: 'hello' },
 { name: 'world' },
 {
  name: 'child folder',
  children: [
  { name: 'alice' }
  ]
 }
 ]
};

上述數(shù)據(jù)源中，name 值會(huì)作為樹(shù)結(jié)點(diǎn)的名稱(chēng)顯示，含 children 的數(shù)組代表節(jié)點(diǎn)的子級(jí)。

遞歸結(jié)構(gòu)的設(shè)計(jì)

由 HTML 中的列表元素 ul 以及 li 組合而成對(duì)象具有天然的樹(shù)形結(jié)構(gòu)，我們不妨采用它們作為構(gòu)建樹(shù)形組件的基本元素。樹(shù)形組件的最外層必然是一個(gè) ul 元素，所以我們可以暫時(shí)定義樹(shù)形組件如下：

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

這里的未定義的組件 Item 是一個(gè)需要遞歸定義的子項(xiàng)組件，它會(huì)根據(jù)提供的數(shù)據(jù)遞歸地生成子孫對(duì)象。下面是一種可能的設(shè)計(jì)：

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

注意，上面的 neme 對(duì)象是用于顯示 name 屬性的。expand 對(duì)象用于展開(kāi)或者關(guān)閉子級(jí)對(duì)象 entries。子級(jí)對(duì)象 entries 被設(shè)置為需要延遲實(shí)例化，只有當(dāng)用戶(hù)點(diǎn)擊 expand 對(duì)象展開(kāi)子級(jí)時(shí)，該對(duì)象才會(huì)實(shí)例化。

數(shù)據(jù)的加載與渲染

如上一節(jié)所述，我們?cè)O(shè)定了子級(jí)對(duì)象 entries 需要延遲實(shí)例化。所以，在給子項(xiàng) Item 提供的數(shù)據(jù)設(shè)置接口不應(yīng)該立馬對(duì) entries 實(shí)例化。下面我們先給出數(shù)據(jù)接口函數(shù)。

Item: {
 // css, xml, map 項(xiàng)同上
 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 };
 }
}

該接口函數(shù) val 只是設(shè)置了當(dāng)前節(jié)點(diǎn)相關(guān)的內(nèi)容。下面我們來(lái)偵聽(tīng) expand 對(duì)象的點(diǎn)擊事件，并適時(shí)地完成組件對(duì)象 entries 的實(shí)例化。

Item: {
 // css, xml, map 項(xiàng)同上
 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 };
 }
}

上述代碼中包含一個(gè) open 參數(shù)，該參數(shù)記錄了當(dāng)前節(jié)點(diǎn)的是否處于展開(kāi)狀態(tài)以供相關(guān)的偵聽(tīng)器使用。

動(dòng)態(tài)添加節(jié)點(diǎn)

現(xiàn)在我們對(duì)上述組件進(jìn)行一個(gè)小的擴(kuò)展，使得它支持動(dòng)態(tài)添加樹(shù)節(jié)點(diǎn)的功能。首先，我們?cè)趯?duì)象 entries 的子級(jí)添加一個(gè)觸發(fā)按鈕，并命名為 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" }
}

其次，需要偵聽(tīng) add 對(duì)象的點(diǎn)擊事件，在偵聽(tīng)器中完成對(duì)象的添加。

Item: {
 // css, xml, map 項(xiàng)同前
 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);
  });
  // 其余代碼同前
 }
}

這里需要注意，對(duì) add 對(duì)象的偵聽(tīng)不能采取直接式的偵聽(tīng)：sys.add.on("click",...)，而應(yīng)該使用代理的方式，否則會(huì)報(bào)錯(cuò)。因?yàn)槠涓讣?jí)屬于延遲實(shí)例化的組件，在 entries 對(duì)象未實(shí)例化之間，add 對(duì)象并不可見(jiàn)。

完整的樹(shù)形組件

綜合以上的內(nèi)容，現(xiàn)在給出一個(gè)完整版本的樹(shù)形組件：

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 };
 }
}

在實(shí)際應(yīng)用中的樹(shù)形組件會(huì)比這里的功能更豐富些，你可以在上述代碼的基礎(chǔ)上進(jìn)一步的改進(jìn)，比如添加些 ICON 圖標(biāo)、讓子項(xiàng)成為可拖動(dòng)的等等。但在改進(jìn)過(guò)程中盡量避免代碼的復(fù)雜化，適當(dāng)?shù)貏冸x些代碼出來(lái)封裝成組件是非常有必要的。

本系列文章基于 xmlplus 框架。如果你對(duì) xmlplus 沒(méi)有多少了解，可以訪問(wèn) www.xmlplus.cn。這里有詳盡的入門(mén)文檔可供參考。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: