這篇文章給大家分享的是有關xmlplus如何實現(xiàn)Tree組件的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

十載的昌圖網(wǎng)站建設經(jīng)驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。營銷型網(wǎng)站建設的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調(diào)整昌圖建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)從事“昌圖網(wǎng)站設計”,“昌圖網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

樹形組件是一種具有層級結(jié)構(gòu)的組件，廣泛應用于各種場景。

數(shù)據(jù)源

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

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

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

遞歸結(jié)構(gòu)的設計

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

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

這里的未定義的組件 Item 是一個需要遞歸定義的子項組件，它會根據(jù)提供的數(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 對象是用于顯示 name 屬性的。expand 對象用于展開或者關閉子級對象 entries。子級對象 entries 被設置為需要延遲實例化，只有當用戶點擊 expand 對象展開子級時，該對象才會實例化。

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

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

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

該接口函數(shù) val 只是設置了當前節(jié)點相關的內(nèi)容。下面我們來偵聽 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 參數(shù)，該參數(shù)記錄了當前節(jié)點的是否處于展開狀態(tài)以供相關的偵聽器使用。

動態(tài)添加節(jié)點

現(xiàn)在我們對上述組件進行一個小的擴展，使得它支持動態(tài)添加樹節(jié)點的功能。首先，我們在對象 entries 的子級添加一個觸發(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" }
}

其次，需要偵聽 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 對象并不可見。

完整的樹形組件

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

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", "//*[@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 圖標、讓子項成為可拖動的等等。但在改進過程中盡量避免代碼的復雜化，適當?shù)貏冸x些代碼出來封裝成組件是非常有必要的。

感謝各位的閱讀！關于“xmlplus如何實現(xiàn)Tree組件”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

本文名稱：xmlplus如何實現(xiàn)Tree組件
URL網(wǎng)址：http://jinyejixie.com/article6/pppdig.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、、自適應網(wǎng)站、面包屑導航、網(wǎng)站改版、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)