微信小程序实现简单的树形图treeview

时间：2024-02-23 09:20:10
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

相关文章