參考：https://segmentfault.com/a/1190000021286232
工作了一段時(shí)間,很久沒寫關(guān)于代碼上的學(xué)習(xí)記錄,這是在公司處理一個(gè)樹形控件時(shí)尋找解決方法時(shí)看到的一篇文章,很有效地幫助到我掉瞳，非常感謝Ｏ帧癞揉！
因?yàn)楣镜脑?對代碼進(jìn)行了一些修改,但總體的操作理念比較符合我的需求。
以下的代碼都是關(guān)于微信小程序作為開發(fā)
首先先新建一個(gè)放自定義組件的文件夾（components）,組件的名稱根據(jù)自己的開發(fā)來定義,我這邊就稱它為（tree）組件,下面為tree組件的全部代碼
（技巧：新建組件文件一般都是右鍵點(diǎn)擊文件夾-然后選擇 '新建Component'-這樣就能快速新建一個(gè)組件文件）也不算啥技巧精盅，估計(jì)大家都知道#125
tree.wxml
有些wx:if的判斷可以暫時(shí)沒用，因?yàn)楣敬a用到，所以我就直接復(fù)制上去了(我比較懶)渔嚷，還有里面用到的圖片（tick.png），只是一張打勾的圖片稠曼，隨便上網(wǎng)找下就是了
<view>
<block wx:for="{{tree}}" wx:key="index">
<view style="display:flex;align-items:center;margin-left:{{item.nodes.length !== 0 ? depth*20 : depth*30}}px;font-size:36rpx;margin-top: 5px;"
wx:if="{{item.category !== 'index'}}">
<view class="tree_left" wx:if="{{item.nodes.length !== 0}}" data-id="{{item.id}}" data-open="{{item.open}}"
bindtap="onchange">
<view class="{{!item.open ? 'icon-right' : 'icon-down'}}"></view>
</view>
<view class="{{item.nodes.length !== 0 ?'parent':'node'}} " data-id="{{item.id}}" data-open="{{item.open}}"
bindtap="onchange">
{{item.name}}
<view class="selected" wx:if="{{item.category !== 'index'}}" catchtap="handleClick"
data-id="{{item.id}}" data-value="{{item.name}}">
<image hidden="{{item.selected === false}}" src="../../pages/image/tick.png"
style="width:20px;height:20px;"></image>
</view>
</view>
</view>
<block wx:if="{{item.nodes}}">
<view hidden="{{!item.open}}">
<tree treeList="{{item.nodes}}" id="treeSelect" bind:onclick="click" bind:change="change"
depth="{{depth+1}}"></tree>
</view>
</block>
</block>
</view>
tree.wxss
.tree_left{
position: relative;
float: left;
}
.icon-down{
border: 8px solid;
border-color: transparent transparent #B8B8B8;
transform: rotate(180deg);
margin-top: 7px;
margin-left: 5px;
margin-right: 10px;
}
.icon-right{
border: 8px solid;
border-color: transparent transparent #B8B8B8;
transform: rotate(90deg);
margin-left: 5px;
}
.selected{
height: 20px;
width: 20px;
border-radius: 50%;
border: 1px solid #D6D6D6;
float: right;
margin-left: 5px;
margin-top: 2px;
}
tree.js
const tranverse = (e) => {
for (let i in e) {
if (e[i].nodes) {
e[i].open = false;
tranverse(e[i].nodes)
}
e[i].selected = false;
}
}
Component({
properties: {
treeList: Object,
depth: {
type: Number,
value: 0
}
},
data: {},
ready() {
// const {treeList}=this.properties;
const { treeList } = this.data;
for (let i in treeList) {
if (treeList[i].nodes) {
treeList[i].open = false;
tranverse(treeList[i].nodes);
}
treeList[i].selected = false;
}
this.setData({
tree: treeList
})
},
methods: {
//修改折疊狀態(tài)
changeOpen(tree, id) {
for (let i = 0; i < tree.length; i += 1) {
if (tree[i].id === id) {
tree[i].open = !tree[i].open;
}
if (tree[i].nodes.length !== 0) {
this.changeOpen(tree[i].nodes, id);
}
}
return;
},
onchange(e) {
const { treeList } = this.data;
const { id } = e.currentTarget.dataset;
this.changeOpen(treeList, id);
this.triggerEvent('change', id, { bubbles: true, composed: true });
this.setData({
tree: treeList
})
},
change(e) {
const id = e.detail;
const { treeList } = this.data;
this.changeOpen(treeList, id);
this.setData({
tree: treeList
})
},
click(e) {
const t = this.selectAllComponents('#treeSelect');
t.forEach(item => {
item.click(e);
})
let id = '';
if (e.detail) {
id = e.detail.id;
}
const { treeList } = this.data;
this.setStatus(treeList, id);
this.setData({
tree: treeList
})
},
handleClick(e) {
const t = this.selectAllComponents('#treeSelect');
t.forEach(item => {
item.click(e);
})
// const {id}=e.currentTarget.dataset;
const { id, value } = e.currentTarget.dataset;
const { treeList } = this.data;
// const value = this.getData(treeList, id)
this.setStatus(treeList, id);
this.triggerEvent('onclick', { id, value, treeList }, { composed: true, bubbles: true });
this.setData({
tree: treeList
})
},
//切換選中狀態(tài)
setStatus(tree, id) {
for (let i = 0; i < tree.length; i += 1) {
if (tree[i].id == id) {
tree[i].selected = true;
} else {
tree[i].selected = false;
}
if (tree[i].nodes) {
this.setStatus(tree[i].nodes, id);
}
}
return;
},
//獲取選中項(xiàng)信息
getData(tree, id) {
for (let i = 0; i < tree.length; i += 1) {
if (tree[i].id === id) {
return tree[i].name;
}
if (tree[i].nodes) {
this.getData(tree[i].nodes, id);
}
}
return '';
},
}
})
tree.json
{
"component": true,
"usingComponents": {
"tree": "/components/tree/tree"
}
}
當(dāng)你寫完這個(gè)tree組件的時(shí)候形病，是時(shí)候驗(yàn)證它的展示效果,
注意：這里的數(shù)據(jù)是寫死的，請根據(jù)自己開發(fā)需求進(jìn)行代碼上的修改
隨便新建一個(gè)Page頁面,為demo頁面
demo.wxml
這個(gè)treeList傳的內(nèi)容為一個(gè)數(shù)組對象霞幅，如：[{..},{...}]漠吻，這樣子的數(shù)據(jù)
<tree treeList="{{treeList}}" id="treeSelect" bind:onclick="treeClick"></tree>
demo.wxss
/* 這里沒寫樣式，可以自己設(shè)計(jì) */
demo.json
這里路徑一般根據(jù)自己的項(xiàng)目文件來引用,并不一定要按我的寫法
{
"usingComponents": {
"tree": "../../components/tree/tree"
}
}
demo.js
Page({
data: {
treeList: [
{
id: '1',
pid: '0',
name: '祖先節(jié)點(diǎn)',
nodes:[
{
id: '1-1',
pid: '1',
name: '父節(jié)點(diǎn)1',
nodes:[
{
id: '1-1-1',
pid: '1-1',
name: '子節(jié)點(diǎn)1',
nodes: []
}
]
},
{
id: '1-2',
pid: '1',
name: '父節(jié)點(diǎn)2',
nodes:[
{
id: '1-1-2',
pid: '1-1',
name: '子節(jié)點(diǎn)2',
nodes: []
}
]
}
]
}
]
},
treeClick(e) {
console.log(e)
const t = this.selectAllComponents('#treeSelect');
t.forEach(item => {
item.click(e);
})
const { id, value } = e.detail;
console.log(e.detail)
}
})
展示效果如下：
總結(jié)：剛開始做公司的這個(gè)需求的時(shí)候,感覺難度應(yīng)該不大,可惜我是程序員中的菜雞,需要找資料才能解決掉,不懂就百度司恳，這是個(gè)日常的操作途乃。不說那么多廢話,這個(gè)樹形控件的使用請留意原文章作者的描述（描述的非常詳細(xì)）,因?yàn)橹坝玫臉湫慰丶际遣荒軌蜻M(jìn)行單選的操作，所以尋找了很多處理方法都搞不掂扔傅，最后找到了這邊文章耍共，并在原代碼進(jìn)行一定的修改，發(fā)現(xiàn)可以滿足我的需求猎塞，這是非常不錯(cuò)的Ｊ远痢！這里再次感謝寫這篇文章的作者荠耽，因?yàn)檎娴膸偷轿伊?哈哈哈钩骇，請?jiān)徫沂遣穗u。
當(dāng)然這個(gè)樹型控件還是存在一些缺陷,假如節(jié)點(diǎn)越來越多又或者節(jié)點(diǎn)上的文字寬度占的比例較大的話,會(huì)顯得比較丑陋,還是需要多加改進(jìn)铝量。
