當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

利用JOrgChart只需2分钟即可配置简单组织机构图

發布時間：2023/12/31 编程问答 46 豆豆

生活随笔收集整理的這篇文章主要介紹了利用JOrgChart只需2分钟即可配置简单组织机构图小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

筆者，自認為只是學習了一點皮毛，或者說JOrgChart就是這么簡單。需要修改方法、樣式直接修改jquery.jOrgChart.js與jquery.jOrgChart.css即可。配置也是那么的簡單。
那么這里我們，實現一個簡單的橫向分布的組織結構吧，原理就是<ul>與<li>的嵌套關系實現組織機構的分布圖示。配置的簡單代碼如下：

<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>jOrgChart配置簡單的組織結構</title><script type="text/javascript" src="./jquery.min.js"></script><script src="./jquery.jOrgChart.js"></script><link rel="stylesheet" href="./jquery.jOrgChart.css"></head><body ><ul id="org" style="display:none"><li>20180812主一級位置<ul><li>下屬二級菜單位置</li><li>下屬二級<ul><li>三級 </li><li>三級<ul><li>四級</li><li>四級</li></ul></li></ul></li><li>下屬二級</li><li>下屬二級</li><li>下屬二級</li><li>下屬二級<ul><li>三級<ul><li>四級</li></ul></li><li>三級<ul><li>四級<ul><li>五級</li><li>五級</li><li>五級</li><li>五級</li></ul></li><li>四級</li><li>四級</li><li>四級</li></ul></li></ul></li><li>下屬二級 </li></ul></li></ul><div id="chart" class="orgChart"><div class="jOrgChart"></div></div></body><script>$(document).ready(function() {$("#org").jOrgChart({chartElement: '#chart',dragAndDrop: true});});</script> </html>

運行效果演示：

通過開發人員調試，我們可以看出。JOrgChart的實現原理是通過table來定位和實現的：

轉載于:https://blog.51cto.com/13479739/2158577

總結

以上是生活随笔為你收集整理的利用JOrgChart只需2分钟即可配置简单组织机构图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： 360全屋路由评测-360全屋路由怎么样
下一篇：什么是 Webpack？【Webpack