溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

利用JOrgChart只需2分鐘即可配置簡單組織機(jī)構(gòu)圖

發(fā)布時(shí)間：2020-07-21 00:13:54 來源：網(wǎng)絡(luò) 閱讀：3893 作者：Red_Ant_hoyl 欄目：web開發(fā)

筆者，自認(rèn)為只是學(xué)習(xí)了一點(diǎn)皮毛，或者說JOrgChart就是這么簡單。需要修改方法、樣式直接修改jquery.jOrgChart.js與jquery.jOrgChart.css即可。配置也是那么的簡單。
那么這里我們，實(shí)現(xiàn)一個(gè)簡單的橫向分布的組織結(jié)構(gòu)吧，原理就是<ul>與<li>的嵌套關(guān)系實(shí)現(xiàn)組織機(jī)構(gòu)的分布圖示。配置的簡單代碼如下：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>jOrgChart配置簡單的組織結(jié)構(gòu)</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" >
            <li>
                20180812主一級(jí)位置
                <ul>
                    <li>下屬二級(jí)菜單位置</li>
                    <li>下屬二級(jí)
                        <ul>
                            <li>三級(jí)  </li>
                            <li>三級(jí)
                                <ul>
                                    <li>四級(jí)</li>
                                    <li>四級(jí)</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>下屬二級(jí)</li>
                    <li>下屬二級(jí)</li>
                    <li>下屬二級(jí)</li>
                    <li>下屬二級(jí)
                        <ul>
                            <li>三級(jí)
                                <ul>
                                    <li>四級(jí)</li>
                                </ul>
                            </li>
                            <li>三級(jí)
                                <ul>
                                    <li>四級(jí)
                                        <ul>
                                            <li>五級(jí)</li>
                                            <li>五級(jí)</li>
                                            <li>五級(jí)</li>
                                            <li>五級(jí)</li>
                                        </ul>
                                    </li>
                                    <li>四級(jí)</li>
                                    <li>四級(jí)</li>
                                    <li>四級(jí)</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>下屬二級(jí)    </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>

運(yùn)行效果演示：
利用JOrgChart只需2分鐘即可配置簡單組織機(jī)構(gòu)圖
通過開發(fā)人員調(diào)試，我們可以看出。JOrgChart的實(shí)現(xiàn)原理是通過table來定位和實(shí)現(xiàn)的：
利用JOrgChart只需2分鐘即可配置簡單組織機(jī)構(gòu)圖

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手