2012-03-11 41 views
11

我要動態地生成一個樹視圖,代表了一個應用程序了一個用戶的連接圖形樹視圖,但我不希望它看起來像一個正常的樹視圖(看起來像一個文件系統結構)所示:JQuery的 - 動態生成的數據

enter image description here

而更像是流程圖是這樣的:

enter image description here

所以基本上我想比樹視圖更圖形方式顯示它,並如果可能的話 -能夠放大和縮小。

如何才能實現這一目標?你知道任何(JS或JQuery)的工具嗎?

感謝

編輯:

爲了不要讓我這裏還有零散的,似乎是正是我一直在爲llooking(與m90的幫助和Tats_innit

工具

thejit

d3.js

js-mindmap

jOrgChart

(順便說一句 - 我與thejit打算現在)

+1

也許這會有所幫助:http://stackoverflow.com/questions/1374149/jquery-mind-map-think-map – m90 2012-03-11 09:47:36

+1

這不是一個教程網站。沒有你嘗試新鮮事物 – 2012-03-11 09:48:48

+1

謝謝你,Chamika Sandamal,你非常有幫助的評論。 我看了十幾個的工具,但他們都沒有我要找的圖形品質。所以我認爲這裏的某個人可能知道這樣的工具。 – levtatarov 2012-03-11 09:57:13

回答

5

這是你在找什麼 - 插件創建樹視圖:

[下面的鏈接]

http://jquery.bassistance.de/treeview/demo/

http://archive.plugins.jquery.com/project/treeview

http://docs.jquery.com/Plugins/Treeview/treeview

啊,對於流程圖感覺有類似上面的鏈接幾個插件,但試試這個:

http://code.google.com/p/js-mindmap/

希望這會有所幫助,歡呼聲,

+0

感謝,但這些也都是普通的樹視圖工具和插件 – levtatarov 2012-03-11 10:15:23

+0

+1你的問題;請嘗試此操作,http://code.google.com/p/js-mindmap/我已編輯我的帖子。如果你會去看我的部分在github鏈接將帶你到演示頁面http:// kenneth。kufluk.com/google/js-mindmap/,歡呼聲 – 2012-03-11 10:21:06

+0

謝謝,我會檢查它...看起來很有希望 – levtatarov 2012-03-11 10:25:27

3

您可以使用JsTree。還有一個用於jQuery UI的tree component

+0

就像我試圖證明我的問題中的圖像 - 我正在尋找一些有點不同的圖形 - 比標準的樹視圖更明智。但是謝謝 – levtatarov 2012-03-11 10:05:44