微信小程序实现简单的树形图treeview
2024-10-18 23:32:52
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
最新文章
- libuv源码分析前言
- PHP数组的基础知识
- BPM业务流程管理与SAP如何更好集成整合?
- 通过dataGridView控件中的checkBox控件对数据库进行批量删除
- 《DSP using MATLAB》示例Example4.11
- python request属性及方法说明
- 关于C#正则表达式MatchCollection类的总结,正则表达式的应用
- Swift基本语法及与OC比较之二
- XMPP适配IPV6 (GCDAsyncSocket适配IPV6)
- python模块之hashlib加密
- Sublime Text3 插件安装教程
- Mahout fp-growth
- JQuery(三)-- AJAX的深入理解以及JQuery的使用
- Java基础语法入门
- 产品经理说| AIOps 让告警变得更智能 (下)
- 开发创建XMPP“发布订阅”扩展(xmpp pubsub extend)
- .net GUI框架
- Linux(Centos)安装配置SVN服务器
- java中二维数组遍历
- [HDU1003]最长子序列和
热门文章
- .net core 支持apk下载
- CentOs安装和使用
- 省一行是一行:在if语句中使用C# 7.0的模式匹配
- Global Error Handling in ASP.NET Web API 2(webapi2 中的全局异常处理)
- POJ 2442 - Sequence - [小顶堆][优先队列]
- linux中使用ps -ef
- Xcode工程编译之duplicate symbol问题引发的一些知识
- [knowledge][模式匹配] 字符匹配/模式匹配 正则表达式 自动机
- LeetCode 824 Goat Latin 解题报告
- Python开发【模块】:aiohttp(二)