在工作中，我們可以發(fā)現(xiàn)在導航、表格等場景下，樹結(jié)構(gòu)常常被應(yīng)用。那么樹結(jié)構(gòu)的設(shè)計是否可以在不同場景下做出細節(jié)改變？這篇文章里，作者結(jié)合工作中遇到的問題，對樹結(jié)構(gòu)如何設(shè)計進行了重新思考，一起來看。

一、背景

最近在工作中遇到了一個問題，需求是對題目列表增加知識點的篩選，知識點是以樹結(jié)構(gòu)的方式創(chuàng)建和呈現(xiàn)，形成知識圖譜。每一個父節(jié)點也代表一個知識點。

如果篩選直接套用樹選擇組件，理解上會有歧義，所以重新梳理了一下樹結(jié)構(gòu)和樹結(jié)構(gòu)+多選框組合的內(nèi)容。

二、樹結(jié)構(gòu)

百科里說：在計算機科學中，樹是一種抽象數(shù)據(jù)類型或是實作這種抽象數(shù)據(jù)類型的數(shù)據(jù)結(jié)構(gòu)，用來模擬具有樹狀結(jié)構(gòu)性質(zhì)的數(shù)據(jù)集合。簡單來說樹是一種存儲和組織數(shù)據(jù)的結(jié)構(gòu)方式。

比如公司的組織框架，就是以公司-部門等樹狀結(jié)構(gòu)來將人重新組織起來。或者是筆記類軟件，是以用戶自己定義的樹狀結(jié)構(gòu)，將筆記組織整理起來。

而組織數(shù)據(jù)的本質(zhì)就是：讓用戶可以快速處理數(shù)據(jù)。那么樹結(jié)構(gòu)的意義也就更為明確了，為了讓用戶更方便的管理、查看、使用數(shù)據(jù)。

樹結(jié)構(gòu)中，父子節(jié)點之間屬于從屬關(guān)系。父節(jié)點之間屬于并列關(guān)系。

三、樹結(jié)構(gòu)的應(yīng)用

樹結(jié)構(gòu)一般被用于導航、選擇器、表格等，由于導航不存在多選的情況，本文暫時忽略。

1. 樹選擇

下圖為 Ant Design 的樹選擇組件。

可以看出，Ant Design 對于樹選擇的規(guī)則：

1. 父節(jié)點被選中后，表示選中所有子節(jié)點。
2. 選擇子節(jié)點，父節(jié)點是半選中狀態(tài)，選擇框展示子節(jié)點內(nèi)容。
3. 選中所有子節(jié)點，父節(jié)點是選中狀態(tài)，則選擇框展示父節(jié)點內(nèi)容。

這種父節(jié)點會代替子節(jié)點內(nèi)容的展示結(jié)果，說明父子節(jié)點的關(guān)系一定是被用戶所熟知的，當父節(jié)點代替子節(jié)點后，用戶不會產(chǎn)生疑惑。

比如下圖例子，電商產(chǎn)品需設(shè)置包郵城市，當選中陜西省下的所有城市，若展示所有城市名稱，顯得有些繁瑣，且數(shù)據(jù)太多，增加用戶記憶負擔。若展示陜西省，表示陜西省內(nèi)的所有城市都包郵，這樣處理概念清晰，理解起來也更簡單。

可以這么處理的原因是，用戶對于省份-城市的父子關(guān)系是非常熟悉的，對于用戶來講，城市一定歸屬于省份之下，大多數(shù)用戶一定是清楚自己城市是屬與那個省份的。并且這里的省份代表了其下的所有城市。那么父節(jié)點是可以代替子節(jié)點內(nèi)容的。

下圖為 TDesign 的樹選擇組件，和 Ant Design 的樹選擇不太一樣。選中所有子節(jié)點，父節(jié)點是選中狀態(tài)，但選擇框展示的是子節(jié)點內(nèi)容。

這里的區(qū)別是父節(jié)點的內(nèi)容沒有代替子節(jié)點。使用上圖包郵的例子解釋一下，當陜西省下可選的城市并不是所有城市，比如陜西省下的可選項只有 4 個城市，那如果用陜西省代替的話，就會造成用戶誤解。用戶會以為包郵地區(qū)是陜西省的所有城市，其實并不是。

以上聊的是 2 者的區(qū)別。而 2 者的相同之處就是，父子節(jié)點選中時的從屬關(guān)系，既父節(jié)點被選中后，會選中所有子節(jié)點。且父子節(jié)點的內(nèi)容不會都展示。

2. 表格

Ant Design 具有樹選擇的表格組件（T Design 類似）：

當CheckStrictly的開關(guān)關(guān)閉時：

1. 父節(jié)點被選中后，表示選中所有子節(jié)點；
2. 選擇子節(jié)點，父節(jié)點是半選中狀態(tài)；
3. 父節(jié)點，不可以單獨選中。

而當開關(guān)打開時：

父子節(jié)點單獨選擇，且父子之間沒有級聯(lián)關(guān)系。所以父節(jié)點也不存在半選狀態(tài)。

為什么表格的樹選擇可以單獨作用，而選擇器的樹選擇不可以呢？

注意，表格的選擇框是在樹結(jié)構(gòu)之外的。首先，從整個表格來看，他們是一體的，所以多選框可以被樹結(jié)構(gòu)影響；但聚焦于 2 者時，也可以把 2 者理解為 2 個模塊，多選是多選，樹結(jié)構(gòu)只是數(shù)據(jù)之間的結(jié)構(gòu)關(guān)系，所以 2 者可以單獨作用。

而選擇器中，多選框是在樹結(jié)構(gòu)之內(nèi)的，表示多選框繼承了樹結(jié)構(gòu)的從屬關(guān)系。即，選擇會是受到父子結(jié)構(gòu)關(guān)系影響。

四、解決方案

那么回到我的問題上，知識點的篩選，應(yīng)該如何設(shè)計？也就是對于樹選擇器，如何使父子之間單獨作用，而不會讓用戶感到疑惑？

選擇模塊和樹結(jié)構(gòu)模塊區(qū)分開，2 者單獨作用?？梢赃x擇表格中的樣式，放在樹結(jié)構(gòu)之前，也可以放在樹結(jié)構(gòu)之后。我最終選擇放在樹結(jié)構(gòu)之后，如果放在樹結(jié)構(gòu)之前和展開收起按鈕位置太近，容易誤點擊。放在之后，用戶在左側(cè)點擊展開，在右側(cè)勾選，操作路徑較長。所以增加選中的響應(yīng)區(qū)域，如圖，響應(yīng)區(qū)域是內(nèi)容和多選框的一整行，且增加 hover 狀態(tài)，告知用戶。

五、最后

本文重點針對我的問題去做了一次思考復盤。其實需要思考的還有很多，例如多選后，選框內(nèi)的選項順序如何展示，是按照選擇順序還是樹級機構(gòu)順序？字數(shù)有沒有限制？選項是使用+1 的方式更好，還是全部展示更好？

如果只是簡單的做出隨意的決定，那工作的成長在哪里？對于這種細節(jié)每一次都能思考多一點，我們的成長就也會多一點。

以上內(nèi)容如有疑問，歡迎討論。