自定义控件实现"/>
微信 html tree,微信小程序Tree自定义控件实现
在微信小程序中实现Tree控件
之前在网上搜索了关于微信小程序tree控件的实现，但是发现居然没有人去做tree控件，因此本人下定决心凭借自己一个多月的自学能力给大家分享一下自己的小成果。
第一步：创建tree自定义控件
**1.创建js文件treebar.js**
//获取应用实例
const app = getApp()
Component({
/**
* 组件的属性列表
*/
properties: {
serval: {
type: 'String',
value: '组线名称'
}
},
/**
* 组件的初始数据
*/
data: {
treeList:[],
treeData: [{ id: 1, parentId: 0, name: "一级菜单A", rank: 1, code:'1'},// rank:代表第几级树节点；code：代表包含哪些子节点ID；
{ id: 2, parentId: 0, name: "一级菜单B", rank: 1, code: '2' },
{ id: 3, parentId: 0, name: "一级菜单C", rank: 1, code: '3' },
{ id: 4, parentId: 1, name: "二级菜单A-A", rank: 2, code: '1,4' },
{ id: 5, parentId: 1, name: "二级菜单A-B", rank: 2, code: '1,5' },
{ id: 6, parentId: 2, name: "二级菜单B-A", rank: 2, code: '2,6' },
{ id: 7, parentId: 4, name: "三级菜单A-A-A", rank: 3, code: '1,4,7' },
{ id: 8, parentId: 7, name: "四级菜单A-A-A-A", rank: 4, code: '1,4,7,8' },
{ id: 9, parentId: 8, name: "五级菜单A-A-A-A-A", rank: 5, code: '1,4,7,8,9' },
{ id: 10, parentId: 9, name: "六级菜单A-A-A-A-A-A", rank: 6, code: '1,4,7,8,9,10' },
{ id: 11, parentId: 10, name: "七级菜单A-A-A-A-A-A-A", rank: 7, code: '1,4,7,8,9,10,11' },
{ id: 12, parentId: 11, name: "八级菜单A-A-A-A-A-A-A-A", rank: 8, code: '1,4,7,8,9,10,11,12' },
{ id: 13, parentId: 12, name: "九级菜单A-A-A-A-A-A-A-A-A", rank: 9, code: '1,4,7,8,9,10,11,12,13' },
{ id: 14, parentId: 13, name: "十级菜单A-A-A-A-A-A-A-A-A-A", rank: 10, code: '1,4,7,8,9,10,11,12,13,14' },
],
index:0,
left:40
},
// 组件创建函数(如果是后台请求的数据，可以在里面实现)
created: function () {
var that = this;
var array = that.treeData();
if (array.length > 0) {
for (var i=0;i
var obj = array[i];
var list = that.data.treeList;
var index_i = that.data.index;
obj["checked"] = true;
// 该节点是否打开
obj["open"] = false;
list[index_i] = obj;
that.setData({
treeList: list,
index: index_i + 1
});
if (obj.children != undefined) {
that.collectTree(obj.children);
}
}
}
},
ready:function() {
var that = this;
that.setData({
treeList: that.data.treeList
});
},
/**
* 组件的方法列表
*/
methods: {
collectTree: function (list) {
var that = this;
if (list.length > 0) {
for (var j = 0; j < list.length; j++) {
var list1 = that.data.treeList;
var index_i = that.data.index;
var obj1 = list[j];
obj1["checked"] = false;
// 该节点是否打开
obj1["open"] = false;
list1[index_i] = obj1;
that.setData({
treeList: list1,
index: index_i + 1
});
if (obj1.children == undefined) {
continue;
} else {
if (obj1.children.length > 0) {
that.collectTree(obj1.children);
}
}
}
}
},
selectNode:function(e){
var that = this;
var trees = that.data.treeList;
for (var i=0;i
var obj = trees[i];
if (e.target.id == obj.id) {
if (obj.open) {
obj["open"] = false;
trees[i] = obj;
for (var j = i; j < trees.length; j++) {
var obj1 = trees[j];
if (obj1.code.indexOf(e.target.id) >= 0 && e.target.id != obj1.id) {
obj1["checked"] = false;
obj1["open"] = false;
trees[j] = obj1;
}
}
} else {
obj["open"] = true;
trees[i] = obj;
for (var j = 0; j < trees.length; j++) {
var obj1 = trees[j];
if (e.target.id == obj1.parentId) {
obj1["checked"] = true;
trees[j] = obj1;
}
}
}
}
}
that.setData({
treeList: trees
});
//console.log(that.data.treeList);
},
// 重新对tree进行循环
reloadTreeData: function (id) {
var that = this;
var list = that.data.treeList;
if (list.length > 0) {
for (var i=0;i
var obj = list[i];
if (id==obj.parentId) {
if (obj.checked) {
obj["checked"] = false;
} else {
obj["checked"] = true;
}
list[i] = obj;
that.setData({
treeList: list
});
that.reloadTreeData(obj.id);
} else {
list[i] = obj;
that.setData({
treeList: list
});
}
}
}
},
treeData:function() {
var that = this;
let cloneData = that.data.treeData; // 对源数据深度克隆
let tree = cloneData.filter((father) => { //循环所有项
let branchArr = cloneData.filter((child) => {
return father.id == child.parentId //返回每一项的子级数组
});
if (branchArr.length > 0) {
father.children = branchArr; //如果存在子级，则给父级添加一个children属性，并赋值
}
return father.parentId == 0; //返回第一层
});
return tree //返回树形数据
}
}
})
**2.创建treebar.json文件**
{
"component": true,
"usingComponents": {}
}
**3.创建treebar.wxml文件**
id='{{item.id}}' bindtap='selectNode'>
{{item.name}}
**4.创建treebar.wxss文件**
.tree-left{
padding-left: 40rpx;
}
第二步：在外面引用创建的自定义控件
在外面页面的json文件中加入以下：
{
"navigationBarTitleText": "树型结构",
"usingComponents": {
"treebar": "自定义treebar控件的路径"
}
}
第三步：在外面页面引入以下代码
{{treebar}}
完成以上的所有操作，你就可以看到树形效果了，祝您成功！
更多推荐
微信 html tree,微信小程序Tree自定义控件实现
发布评论