中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

一、背景

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

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

二、樹結構

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

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

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

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

三、樹結構的應用

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

1. 樹選擇

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

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

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

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

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

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

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

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

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

2. 表格

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

當CheckStrictly的開關關閉時：

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

而當開關打開時：

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

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

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

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

四、解決方案

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

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

五、最后

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

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

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