H5有很多树形图(树状图)的组件,echarts也有。比如像bootstrap的treeview,定制性很强。不过这些都无法方便地为小程序所用,除非整个页面用H5搭建再用webview框进去,有点粗暴。所以还是自己写一个简单的树形图组件试试。最终效果如下:

新建一个微信小程序项目,在app.jsonpages里添加这么一行,
"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里加了openisBranch来判断当前节点是否是树枝(相对于树叶)、是否展开,其它没多少要解释的,一开始我也想把这两个字段加到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

微信小程序实现简单的树形图treeview的更多相关文章

  1. 微信小程序支付简单小结与梳理

    前言 公司最近在做微信小程序,被分配到做支付这一块,现在对这一块做一个简单的总结和梳理. 支付,对于购物来说,可以说是占据了十分重要的一块,毕竟能收到钱才是重点. 当然在开发之前,我们需要有下面这些东 ...

  2. [转]微信小程序支付简单小结与梳理

    本文转自:https://www.cnblogs.com/onetwo/p/6667424.html 公司最近在做微信小程序,被分配到做支付这一块,现在对这一块做一个简单的总结和梳理. 支付,对于购物 ...

  3. 微信小程序_简单组件使用与数据绑定

    简单的数据传值 官方文档:传送门 点击"按钮"测试后,按钮文本改变,下方text文本改变,通过console.log()在输出台中打印按钮文本信息 程序结构 Page({ //页面 ...

  4. 微信小程序实现简单的2048

    这两天心血来潮,用微信小程序写了一个简单的2048,欢迎各位老铁围观,提出宝贵意见.这里我从0到1赘述一下个人实现流程: 首先去微信公平台(https://mp.weixin.qq.com/)注册一个 ...

  5. 微信小程序之简单记账本开发记录(七)

    记账本已经可以实现添加和删除的功能 现在只需要将上述步骤重复一遍便可将另一个界面做出来. 大体上已制作完成,如果在细节上有变动会在这一篇更新 总体来说,这个作业让我对微信小程序的开发有了更多地认识,大 ...

  6. 微信小程序之简单记账本开发记录(一)

    下载并安装微信开发者工具 在选择开发记账本程序的时候犹豫着选择android studio还是微信小程序 最后选择了微信小程序,因其便利和快捷. 话不多说,第一步,下载并安装微信开发者工具.下面是教程 ...

  7. 微信小程序之简单记账本开发记录(二)

    1.打开开发者工具 2.从微信公众平台上获取到appid,或者使用测试号. 项目的大致目录如下: 一个小程序主体部分由三个文件组成,必须放在项目的根目录中 以app为开头的文件名用来布置作用于整个项目 ...

  8. 微信小程序一些简单的快捷键

    常用快捷键 格式调整 Ctrl+S:保存文件Ctrl+[, Ctrl+]:代码行缩进Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块Ctrl+C Ctrl+V:复制粘贴,如果没有选 ...

  9. 微信小程序 table 简单测试

    <view class='AutoTable'> <view id='AutoTableItem'> <block wx:for="{{array}}" ...

随机推荐

  1. day_5.28 py网络编程

    端口 socket简介: socket为一个类   s接收的是返回的对象引用 2018-5-28 15:52:47 开始进行网络编程 udp 套接字 encode() 编码 decode() 解码 ' ...

  2. A - ACM Rank Table

    ACM contests, like the one you are participating in, are hosted by the special software. That softwa ...

  3. 学习markdown语法

    12.内部跳转 [这是一个按钮](#测试标题) - 1 - 1 - 1 # 测试标题 这是一个按钮 1 1 1 测试标题 注:使用-代替空格

  4. Linux --Unbuntu php项目对应不同php版本

    直入主题 因服务器上项目使用php版本有不同要求,特此解决一下. 下载 服务器上已有php7.0版本,安装7.0的方法自行百度,apt-get管理工具可直接install安装 然后安装一下需要的版本. ...

  5. ThinkPHP框架 表单传值自动验证!!

    如果有多个字段都包含错误,默认只显示一个错误.如果想显示全部错误,可以设置属 性: //批量验证 d protected $patchValidate = true; 如果是直接 POST 过来的,直 ...

  6. 数据库系统Informix为例,介绍改善用户查询计划的方法。

    数据库系统Informix为例,介绍改善用户查询计划的方法. 1.合理使用索引 索引是数据库中重要的数据结构,它的根本目的就是为了提高查询效率.现在大多数的数据库产品都采用IBM最先提出的ISAM索引 ...

  7. java8 集合对象间的处理

    eg1:List<CarVo> carVoList = carService.getList(carVo); List<String> listVins = carVoList ...

  8. 洛谷P1029 最小公约数和最大公倍数问题【数论】

    题目:https://www.luogu.org/problemnew/show/P1029 题意: 给定两个数$x$和$y$,问能找到多少对数$P$$Q$,使得他们的最小公约数是$x$最大公倍数是$ ...

  9. 难以接受你的改变:从project.json到.csproj

    自从微软做了一个艰难的决定——.NET Core彻底放弃project.json,全面改回.csproj——至今,虽然赞美之声不断,但我依然不喜欢也难以接受这样的改变. 难以接受主要有两方面的原因: ...

  10. { MySQL基础数据类型}一 介绍 二 数值类型 三 日期类型 四 字符串类型 五 枚举类型与集合类型

    MySQL基础数据类型 阅读目录 一 介绍 二 数值类型 三 日期类型 四 字符串类型 五 枚举类型与集合类型 一 介绍 存储引擎决定了表的类型,而表内存放的数据也要有不同的类型,每种数据类型都有自己 ...