jQuery組織結構圖表外掛OrgChart
js程式碼
; <腳本類型=“text/javascript”src=“js/html2canvas.js”></script> <腳本類型=“text/javascript”src=“js/jquery.orgchart.js”>腳本> <腳本類型=“text/javascript”> '使用嚴格'; (函數($){ $(函數() { var 資料來源 = { 'name': '姥姥', 'title': '總經理', '關係':{ 'children_num':8 }, '孩子': [ { 'name': '苗波', 'title': '部門經理', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }}, { 'name': '蘇淼', 'title': '部門經理', '關係': { 'children_num': 2, 'parent_num': 1,'sibling_num': 7 }, '孩子': [ { 'name': '鐵花', '職稱': '高級工程師', '關係': { 'children_num': 0, 'parent_num': 1,'sibling_num': 1 }}, { 'name': '嘿嘿', '職稱': '高級工程師', '關係': { 'children_num': 2, 'parent_num': 1,'sibling_num': 1 }, '孩子': [ { 'name': '龐龐', '職稱': '工程師', '關係': { 'children_num': 0, 'parent_num': 1,'sibling_num': 1 }}, { 'name': '翔翔', 'title': 'UE工程師', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 1 }} ] } ] }, { 'name': '餘傑', 'title': '部門經理', '關係': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }}, { 'name': '於麗', 'title': '部門經理', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }}, { 'name': '紅淼', 'title': '部門經理', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }}, { 'name': '於偉', 'title': '部門經理', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }}, { 'name': '春苗', 'title': '部門經理', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }}, { 'name': '於鐵', 'title': '部門經理', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }} ] }; $('#chart-container').orgchart({ '資料':資料來源, 「深度」:2, 'nodeTitle': '名稱', '節點內容':'標題' }); }); })(jQuery); </劇本>
jQuery 組織結構圖表插件OrgChart 組織結構佈局程式碼是一款可以使用本地數據,或透過ajax呼叫來完成數據的填充。
免責聲明
本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性!本站所有資源僅供學習參考。請不要將它們用於商業目的。否則,一切後果都由您負責!如有侵權,請聯絡我們刪除。聯絡方式:admin@php.cn
相關文章
![jQuery 如何有效率地選擇具有特定 CSS 屬性的元素?](https://img.php.cn/upload/article/001/246/273/173297269832803.jpg)
30 Nov 2024
在 jQuery 中選擇具有特定 CSS 屬性的元素問題:我們如何有效地選擇擁有特定 CSS 屬性的所有元素...
![如何使用 jQuery 和 JavaScript 高效解析和顯示 JSON 資料?](https://img.php.cn/upload/article/001/246/273/173343344183746.jpg)
06 Dec 2024
使用 jQuery 和 JavaScript 解析 JSON 資料這個簡短的教程解決了有效操作 JSON 資料的挑戰,特別是...
![使用 jQuery 建立 HTML 元素 $(document.createElement('div')) 比 $('<div></div>') 更有效率嗎?](https://img.php.cn/upload/article/001/246/273/173196654377725.jpg)
19 Nov 2024
使用 jQuery 最佳化 HTML 元素建立以增強效能當使用 jQuery 建立動態介面時,必須...
![如何在 ASP.NET UpdatePanel 中維護 jQuery 滑鼠懸停效果?](https://img.php.cn/upload/article/001/246/273/173318683092401.jpg)
03 Dec 2024
jQuery $(document).ready 和 UpdatePanels:精緻的外觀當利用 jQuery 將滑鼠懸停效果應用於 UpdatePanel 中的元素時,...
![如何在不使用'display”的情況下在 jQuery 中將可見性設為隱藏?](https://img.php.cn/upload/article/001/246/273/173359861543064.jpg)
08 Dec 2024
設定隱藏可見性的 jQuery 等效項在 jQuery 中,.show() 和 .hide() 方法通常用於操作顯示屬性...
![See all articles](/static/imghw/down_right.png)
![](/static/imghw/taglogo.png)
Hot Tools
![jQuery2019情人節表白放煙火動畫特效](https://img.php.cn/upload/jscode/000/000/001/5c64d3e6d92b2641.jpg)
jQuery2019情人節表白放煙火動畫特效
一款抖音上很火紅的jQuery情人節表白放煙火動畫特效,適合程式設計師、科技宅用來向心愛的女孩告白,無論你選擇願意或不願意,到最後都得同意。
![layui響應式動畫登入介面模板](https://img.php.cn/upload/jscode/000/000/001/5a93a913de3a7571.png)
layui響應式動畫登入介面模板
layui響應式動畫登入介面模板
![520情人節表白網頁動畫特效](https://img.php.cn/upload/jscode/000/287/557/620611f90d724550.jpg)
520情人節表白網頁動畫特效
jQuery情人節表白動畫、520表白背景動畫
![酷炫的系統登入頁](https://img.php.cn/upload/jscode/000/120/096/5e09903f2f0c4401.jpg)
酷炫的系統登入頁
酷炫的系統登入頁
![HTML5卡音樂播放器-CASSETTE PLAYER](https://img.php.cn/upload/jscode/000/120/096/5e200ad65973d549.jpg)
HTML5卡音樂播放器-CASSETTE PLAYER
HTML5卡音樂播放器-CASSETTE PLAYER
![](/static/imghw/taglogo.png)
熱門文章
Tales Of Graces F 重製版:所有鎖定的寶箱密碼
18 Jan 2025
手游攻略
崩壞:星穹鐵道 - 所有金色替罪羊謎題解決方案
18 Jan 2025
手游攻略
如何修復 KB5049622 在 Windows 11 中安裝失敗的問題?
15 Jan 2025
故障排查
Haikyuu傳奇風格指南:完整列表和最佳選擇
25 Jan 2025
手游攻略
如何修復 KB5050021 在 Windows 11 中安裝失敗的問題?
15 Jan 2025
故障排查