微信小程式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<array.length;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<trees.length;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<list.length;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檔案**
<view wx:for="{{treeList}}" wx:for-item="item" wx:for-index="idx">
<view wx:if="{{item.checked==true}}" style='padding-left:{{40*(item.rank+1)}}rpx'
id='{{item.id}}' bindtap='selectNode'>
{{item.name}}
</view>
</view>
**4.建立treebar.wxss檔案**
.tree-left{
padding-left: 40rpx;
}
第二步：在外面引用建立的自定義控制元件
在外面頁面的json檔案中加入以下：
{
"navigationBarTitleText": "樹型結構",
"usingComponents": {
"treebar": "自定義treebar控制元件的路徑"
}
}
第三步：在外面頁面引入以下程式碼
<view class="page">
<!--載入自定義元件-->
<treebar id="treebar">{{treebar}}</treebar>
</view>
完成以上的所有操作，你就可以看到樹形效果了，祝您成功！
相關文章
- 微信小程式自定義元件實現 tabBar、navBar微信小程式元件tabBar
- 微信小程式底部實現自定義動態Tabbar微信小程式tabBar
- 微信小程式 自定義tabbar微信小程式tabBar
- 微信小程式自定義tabBar微信小程式tabBar
- 微信小程式自定義tab，多層tab巢狀實現微信小程式巢狀
- 微信小程式自定義導航欄微信小程式
- 微信小程式-自定義下拉重新整理微信小程式
- 微信小程式自定義元件-城市選擇微信小程式元件
- 微信小程式 vue 自定義日曆 sku微信小程式Vue
- 微信小程式--自定義radio元件樣式微信小程式元件
- 【微信小程式】常用元件及自定義元件微信小程式元件
- 微信小程式下拉選單自定義元件微信小程式元件
- 微信小程式-自定義placeholder顏色和樣式微信小程式
- 微信小程式自定義元件-可清除的input元件微信小程式元件
- 微信小程式自定義導航欄適配指南微信小程式
- 微信小程式使用自定義字型的三種方法微信小程式自定義字型
- 微信小程式之自定義倒數計時元件微信小程式元件
- 微信小程式自定義元件的關鍵記錄微信小程式元件
- 微信小程式API互動的自定義封裝微信小程式API封裝
- Qt實現自定義控制元件QT控制元件
- 微信小程式自定義元件封裝及元件傳值微信小程式元件封裝
- 微信小程式swiper修改自定義指示點樣式微信小程式
- 當微信小程式遇上TensorFlow：小程式實現微信小程式
- 微信小程式 遮罩功能實現微信小程式遮罩
- 微信小程式實現軌跡回放，微信原生小程式，基於uniapp的小程式？微信小程式APP
- 如何利用微狗仔實現微信自定義分享卡片連結
- 微信小程式實現換膚功能微信小程式
- JS實現監控微信小程式JS微信小程式
- 小程式實現微信 【我的】介面
- 微信小程式（JAVAScript）實現餅圖微信小程式JavaScript
- 微信小程式之如何使用自定義元件封裝原生 image 元件微信小程式元件封裝
- 小程式自定義modal彈窗封裝實現封裝
- 微信小程式使用微信雲託管新增自定義域名並轉發到pexels.com微信小程式
- 微信小程式實現WebSocket心跳重連微信小程式Web
- 微信小程式實現星星評分效果微信小程式
- 微信小程式實現釋出作業微信小程式
- 微信，支付寶小程式實現原理概述
- QT實現可拖動自定義控制元件QT控制元件