利用JOrgChart只需2分鐘即可配置簡單組織機構圖
阿新 • • 發佈：2018-08-13
51cto utf art asc src link char 實現原理 spl 筆者，自認為只是學習了一點皮毛，或者說JOrgChart就是這麽簡單。需要修改方法、樣式直接修改jquery.jOrgChart.js與jquery.jOrgChart.css即可。配置也是那麽的簡單。
那麽這裏我們，實現一個簡單的橫向分布的組織結構吧，原理就是<ul>與<li>的嵌套關系實現組織機構的分布圖示。配置的簡單代碼如下：
那麽這裏我們，實現一個簡單的橫向分布的組織結構吧，原理就是<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來定位和實現的：
利用JOrgChart只需2分鐘即可配置簡單組織機構圖