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

一、背景

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

如果篩選直接套用樹選擇組件，理解上會有歧義，所以重新梳理了一下樹結構和樹結構+多選框組合的內容。

二、樹結構

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

比如公司的組織框架，就是以公司-部門等樹狀結構來將人重新組織起來?；蛘呤枪P記類軟件，是以用戶自己定義的樹狀結構，將筆記組織整理起來。

而組織數據的本質就是：讓用戶可以快速處理數據。那么樹結構的意義也就更為明確了，為了讓用戶更方便的管理、查看、使用數據。

樹結構中，父子節點之間屬于從屬關系。父節點之間屬于并列關系。

三、樹結構的應用

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

1. 樹選擇

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

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

1. 父節點被選中后，表示選中所有子節點。
2. 選擇子節點，父節點是半選中狀態，選擇框展示子節點內容。
3. 選中所有子節點，父節點是選中狀態，則選擇框展示父節點內容。

這種父節點會代替子節點內容的展示結果，說明父子節點的關系一定是被用戶所熟知的，當父節點代替子節點后，用戶不會產生疑惑。

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

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

下圖為 TDesign 的樹選擇組件，和 Ant Design 的樹選擇不太一樣。選中所有子節點，父節點是選中狀態，但選擇框展示的是子節點內容。

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

以上聊的是 2 者的區別。而 2 者的相同之處就是，父子節點選中時的從屬關系，既父節點被選中后，會選中所有子節點。且父子節點的內容不會都展示。

2. 表格

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

當CheckStrictly的開關關閉時：

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

而當開關打開時：

父子節點單獨選擇，且父子之間沒有級聯關系。所以父節點也不存在半選狀態。

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

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

而選擇器中，多選框是在樹結構之內的，表示多選框繼承了樹結構的從屬關系。即，選擇會是受到父子結構關系影響。

四、解決方案

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

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

五、最后

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

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

以上內容如有疑問，歡迎討論。