微信小程序實現簡單的樹形圖treeview

H5有很多樹形圖（樹狀圖）的組件，echarts也有。比如像bootstrap的treeview，定制性很強。不過這些都無法方便地為小程序所用，除非整個頁面用H5搭建再用webview框進去，有點粗暴。所以還是自己寫一個簡單的樹形圖組件試試。最終效果如下：

新建一個微信小程序項目，在 app.json的 pages里添加這么一行，

"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/components/mytree/mytree"
  ],

ctrl+s或者ctrl+b一下，小程序就自動生成了mytree的文件目錄了，相信熟悉小程序開發的都知道。

首先修改mytree.json：

{
  "component": true,
}

這表示要開發一個組件（小程序官方說，也能當普通頁面使）。
我們使用的樹數據treeData將是類似這樣的，text字段用於顯示，id字段用於點擊事件傳遞數據，nodes就是下一層節點。

var treeData = {
  text: 'My Tree',
  id: 0,
  nodes: [
    {
      text: 'Parent 1',
      id: 1,
      nodes: [
        {
          text: 'Child 1',
          id: 2,
          nodes: [
            {
              text: 'Grandchild 1',
              id: 3,
            },
            {
              text: 'Grandchild 2',
              id: 4,
            },
          ]
        },
        {
          text: 'Child 2',
          id: 5,
        }
      ]
    },
    {
      text: 'Parent 2',
      id: 6,
      nodes: [
        {
          text: 'Child 1',
          id: 7,
        },
        {
          text: 'Child 2',
          id: 8,
        }
      ]
    }
  ]
}

先寫mytree.wxml，比較簡單，model是后面綁定的屬性值，也就是樹的數據，待會兒看mytree.js就明白了。

<!-- pages/components/mytree/mytree.wxml-->
<view>
  <view>
    <text wx:if='{{ isBranch }}' bindtap='toggle'>{{ open ? '[ - ]' : '[ + ]' }} </text>
    <text wx:else>[ · ] </text>
    <text bindtap='tapItem' data-itemid='{{ model.id }}'>{{ model.text }}</text>
  </view>
  <view style='padding-left: 50rpx;' wx:if='{{ isBranch }}' hidden='{{ !open }}'>
    <mytree wx:for='{{ model.nodes }}' wx:key='id' model='{{ item }}'></mytree>
  </view>
</view>

這里最關鍵的是使用了一個遞歸，也就是組件里使用了組件自己，那就需要回頭修改一下mytree.json，如下：

{
  "component": true,
  "usingComponents": {
    "mytree": "../mytree/mytree"
  }
}

再看看 mytree.js，內容也不多，在 data里加了 open和 isBranch來判斷當前節點是否是樹枝（相對於樹葉）、是否展開，其它沒多少要解釋的，一開始我也想把這兩個字段加到 model里面去，好像不方便進行 setData，讀者可以自己試試。
需要說明的是， triggerEvent方法里需要添加選項設置：

this.triggerEvent('tapitem', { nid: nid }, { bubbles: true, composed: true })

不然調用組件的節點接收不到遞歸里面的事件觸發。

// pages/components/mytree/mytree.js
Component({
  properties: {
    model: Object,
  },

  data: {
    open: false,
    isBranch: false,
  },

  methods: {
    toggle: function(e) {
      if (this.data.isBranch) {
        this.setData({
          open: !this.data.open,
        })
      }
    },
    
    tapItem: function(e) {
      var itemid = e.currentTarget.dataset.itemid;
      console.log('組件里點擊的id: ' + itemid);
      this.triggerEvent('tapitem', { itemid: itemid }, { bubbles: true, composed: true });
    }
  },

  ready: function(e) {
    this.setData({
      isBranch: Boolean(this.data.model.nodes && this.data.model.nodes.length),
    });
    console.log(this.data);
  },
})

最后看看使用組件，直接把index.html清空用來測試，相關的幾個文件代碼如下：

<!--index.wxml-->
<view>
  <view class='up'>--------------</view>
  <mytree model='{{ treeData }}' bind:tapitem='tapItem'></mytree>
  <view class='down'>--------------</view>
</view>

index.json如下：

{
  "usingComponents": {
    "mytree": "../components/mytree/mytree"
  }
}

index.js如下，記得把前文的treeData貼上：

Page({
  data: {
    treeData: treeData,
  },
  //事件處理函數
  tapItem: function (e) {
    console.log('index接收到的itemid: ' + e.detail.itemid);
  },

  onLoad: function () {
    
  },
})

 

轉載：https://www.jianshu.com/p/dabca0161993