0
我想創建某種形式的樹形視圖，儘管我不知道它是否是正確的單詞。我畫出它的照片讓你明白我的意思。基本上它看起來像顛倒的花朵。 
如何製作特定的「樹視圖」
這樣做的最好方法是什麼？對於每一個登錄用戶的用戶，應該有一個新的分支，他的圖片和名稱以及分支機構的數量不受限制。 我想jQuery是這樣，但我無法找到任何可以幫助我的東西。所以我會很高興爲jQuery插件或任何其他有用的提示的任何鏈接或提示。
A
回答
2
我可能已經對這個答案有點過分了，但是測試一些東西很有趣，所以我提出了一個完整的解決方案。佈局適應大多數元素的尺寸變化。我試圖讓CSS儘可能容易編輯。
您所需要做的就是根據需要多次複製level_2_entry_container。這可以通過幾行代碼輕鬆地在客戶端或服務器端完成。內容結構在左側和右側都是相同的（方向和定位是通過CSS控制的）。
經過最新版Chrome和Firefox的測試。
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #444;
}
.main_container {
min-width: 400px;
margin-top: 20px;
margin-bottom: 20px;
}
.solution_container {
position: relative;
}
.flex_container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
position: relative;
z-index: 2;
}
.flex_item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
.flex_item_static {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
position: relative;
}
.level_1_entry_image {
width: 160px; /* change according to preference */
height: 160px; /* change according to preference */
display: block;
border-radius: 50%;
box-sizing: border-box;
border: solid 4px #eee;
background-color: #eee;
}
.level_1_entry_content {
padding-left: 20px; /* change according to preference - controls text distance from level_1_image */
}
.center_line {
position: absolute;
width: 4px;
height: 100%;
top: 0px;
left: 50%;
margin-left: -2px;
background-color: #eee;
z-index: 1;
}
.center_footer {
position: absolute;
width: 20px;
height: 4px;
bottom: 0px;
left: 50%;
margin-left: -10px;
background-color: #eee;
z-index: 1;
}
.level_2_entry_container {
width: 50%;
box-sizing: border-box;
margin-top: -50px;
}
.level_2_entry_container:first-child {
margin-top: 0px;
}
.level_2_entry_container:nth-child(odd) {
margin-right: auto;
}
.level_2_entry_container:nth-child(even) {
margin-left: auto;
}
.level_2_entry_image,
.level_2_entry_content {
margin: 20px; /* change according to preference - controls level_2_image distance from central_line */
}
.level_2_entry_image {
width: 100px; /* change according to preference */
height: 100px; /* change according to preference */
display: block;
border-radius: 50%;
box-sizing: border-box;
border: solid 4px #eee;
position: relative;
z-index: 2;
background-color: #eee;
}
.level_2_entry_container:nth-child(odd) .level_2_entry_image {
margin-left: 0px !important;
margin-bottom: 0px !important;
}
.level_2_entry_container:nth-child(even) .level_2_entry_image {
margin-right: 0px !important;
margin-bottom: 0px !important;
}
.level_2_entry_content {
margin-left: 0px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
padding: 20px; /* change according to preference - controls text distance from level_2_image */
padding-top: 0px;
padding-bottom: 0px;
}
.level_2_entry_container:nth-child(odd) .level_2_entry_content {
padding-left: 0px !important;
text-align: right;
}
.level_2_entry_container:nth-child(even) .level_2_entry_content {
padding-right: 0px !important;
text-align: left;
}
.diagonal_line_1,
.diagonal_line_2 {
position: absolute;
width: 75%;
height: 75%;
z-index: 1;
top: 0px;
}
.diagonal_line_1 {
right: 0px;
}
.diagonal_line_2 {
left: 0px;
}
.level_2_entry_container:nth-child(odd) .diagonal_line_2 {
display: none;
}
.level_2_entry_container:nth-child(even) .diagonal_line_1 {
display: none;
}
.level_2_entry_container:nth-child(odd) > .flex_container > .flex_item:nth-child(1) {
order: 1;
}
.level_2_entry_container:nth-child(odd) > .flex_container > .flex_item:nth-child(2) {
order: 2;
}
.level_2_entry_container:nth-child(even) > .flex_container > .flex_item:nth-child(1) {
order: 2;
}
.level_2_entry_container:nth-child(even) > .flex_container > .flex_item:nth-child(2) {
order: 1;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
</head>
<body>
<div class="main_container">
<div class="solution_container">
<div class="flex_container">
<div class="flex_item"></div>
<div class="flex_item flex_item_static">
<img class="level_1_entry_image" src="http://placehold.it/320x320"/>
</div>
<div class="flex_item">
<div class="level_1_entry_content">Lorem ipsum dolor sit amet</div>
</div>
</div>
<div class="center_line"></div>
<div class="center_footer"></div>
<div class="level_2_container">
<div class="level_2_entry_container">
<div class="flex_container">
<div class="flex_item">
<div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
</div>
<div class="flex_item flex_item_static">
<img class="level_2_entry_image" src="http://placehold.it/200x200"/>
<svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
<line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
</svg>
<svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
<line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
</svg>
</div>
</div>
</div>
<div class="level_2_entry_container">
<div class="flex_container">
<div class="flex_item">
<div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
</div>
<div class="flex_item flex_item_static">
<img class="level_2_entry_image" src="http://placehold.it/200x200"/>
<svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
<line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
</svg>
<svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
<line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
</svg>
</div>
</div>
</div>
<div class="level_2_entry_container">
<div class="flex_container">
<div class="flex_item">
<div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
</div>
<div class="flex_item flex_item_static">
<img class="level_2_entry_image" src="http://placehold.it/200x200"/>
<svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
<line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
</svg>
<svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
<line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
</svg>
</div>
</div>
</div>
<div class="level_2_entry_container">
<div class="flex_container">
<div class="flex_item">
<div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
</div>
<div class="flex_item flex_item_static">
<img class="level_2_entry_image" src="http://placehold.it/200x200"/>
<svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
<line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
</svg>
<svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
<line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
</svg>
</div>
</div>
</div>
<div class="level_2_entry_container">
<div class="flex_container">
<div class="flex_item">
<div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
</div>
<div class="flex_item flex_item_static">
<img class="level_2_entry_image" src="http://placehold.it/200x200"/>
<svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
<line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
</svg>
<svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
<line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
</svg>
</div>
</div>
</div>
<div class="level_2_entry_container">
<div class="flex_container">
<div class="flex_item">
<div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
</div>
<div class="flex_item flex_item_static">
<img class="level_2_entry_image" src="http://placehold.it/200x200"/>
<svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
<line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
</svg>
<svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
<line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
</svg>
</div>
</div>
</div>
<div class="level_2_entry_container">
<div class="flex_container">
<div class="flex_item">
<div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
</div>
<div class="flex_item flex_item_static">
<img class="level_2_entry_image" src="http://placehold.it/200x200"/>
<svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
<line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
</svg>
<svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
<line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
</svg>
</div>
</div>
</div>
<div class="level_2_entry_container">
<div class="flex_container">
<div class="flex_item">
<div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
</div>
<div class="flex_item flex_item_static">
<img class="level_2_entry_image" src="http://placehold.it/200x200"/>
<svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
<line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
</svg>
<svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
<line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>+0
哇！非常好，非常感謝你！這正是我一直在尋找的。在此期間，我一直試圖使用table和html5 canvas，因爲我沒有找到任何插件。但結果不是最好的:)這更好，謝謝！我感謝你的時間。 –
+0
現在我使用PHP進行動態化，編輯它一點，它的作用就像一個魅力。再次非常感謝:) –
+0
很高興你發現它有用:) – Sebastian
相關問題
- 1. 如何在mvc3中製作特定視圖的pdf報告
- 2. 如何動畫視圖控制器中的特定視圖
- 3. 如何製作SWT樹的特定級別可編輯
- 4. 如何製作此特定圖案
- 5. 如何在YUI樹形視圖中展開特定節點
- 6. 在Sencha ExtJs 6.0中製作樹視圖
- 7. JAVAFX製作樹視圖列表
- 8. 定製樹視圖虛擬化
- 9. 如何綁定樹視圖與項目
- 10. 樹枝定義瞭如何在視圖
- 11. 如何重定向到一個特定的視圖控制器
- 12. 限制爲特定視圖的ASP.NET MVC控制器操作
- 13. 可視化：如何製作交互式徑向樹形圖？
- 14. 如何從MySQL和PHP和jquery製作樹視圖
- 15. 如何更改javafx中特定樹視圖的摺疊和展開圖標？
- 16. 我如何得到由scipy.cluster.hierarchy製作的樹狀圖的子樹
- 17. 如何製作adonis.js視圖？
- 18. 如何更改特定視圖的視圖控制器的方向
- 19. 樹視圖樹節點複製
- 20. 如何在UINavigationController的單個視圖上強制特定的UIInterfaceOrientation？
- 21. xxforms：xforms樹視圖：select1控制
- 22. 引用特定的視圖控制器
- 23. 如何創建樹視圖？
- 24. 如何在特定的視圖
- 25. 如何打印特定視圖控制器的視圖層次結構？
- 26. 將xml綁定到ASP.NET樹視圖。我如何獲得特定節點？
- 27. ios - 如何移動到特定的UI視圖控制器
- 28. 如何從tabbarcontroller訪問特定的視圖控制器？
- 29. 如何從tabbarcontroller中選擇特定的視圖控制器？
- 30. 我該如何彈出一個特定的視圖控制器？
請閱讀：[？我能在這裏左右請問什麼主題（http://stackoverflow.com/help/on-topic）。 _「問題**要求我們推薦或查找**書籍，工具，**軟件庫，教程或其他非現場資源，因爲它們傾向於吸引自以爲是的答案和垃圾郵件，所以不適合堆棧溢出。」 _ –
無代碼無答案 – Gert
您可以將其繪製爲7列的列表，col1：用戶1標籤，col2：user1圖像，col3：分支連接器，col4：水平線和col5：用於用戶2等等。 – Anil