JS--插件： 樹Tree 開發(fā)與實(shí)現(xiàn)

日常在Web項(xiàng)目開發(fā)時(shí)，經(jīng)常會(huì)碰到樹形架構(gòu)數(shù)據(jù)的顯示，從數(shù)據(jù)庫中獲取數(shù)據(jù)，并且顯示成樹形。為了方便，我們可以寫一個(gè)javascript的一個(gè)跨瀏覽器樹控件，后續(xù)可以重復(fù)使用。本節(jié)分享一個(gè)自己開發(fā)的JS tree插件，對(duì)有需要的朋友可以直接下載使用。

Tree插件 需要實(shí)現(xiàn)

   （1）、自動(dòng)將數(shù)據(jù)組織成上下級(jí)關(guān)系，這樣我們在前端手工添加數(shù)據(jù)或者從數(shù)據(jù)庫中獲取到的數(shù)據(jù)不需要我們來組織上下級(jí)關(guān)系

   （2）、支持自定 加載目錄樹  支持XML、JSON 格式的數(shù)據(jù)加載

   （3）、實(shí)現(xiàn)樹節(jié)點(diǎn)的選擇（單選、復(fù)選[級(jí)聯(lián)選擇]）功能

   （4）、支持大數(shù)據(jù)的一次性加載

   。。。。。。

下面開始分享自己寫的一個(gè)Tree 插件： 此插件基于Jquery 需要引用

第一：插件中每個(gè)樹節(jié)點(diǎn)Node的參數(shù)JSON對(duì)象如下所示

        nodeItem: function () {
            return {
                nodecode: "",             //  節(jié)點(diǎn)編碼
                nodetext: "",               //  節(jié)點(diǎn)文本 [節(jié)點(diǎn)顯示文本]
                nodetitle: "",               //  節(jié)點(diǎn)標(biāo)題 [用于鼠標(biāo)移過時(shí)顯示的節(jié)點(diǎn)文本]
                supnodecode: "",       //  上級(jí)節(jié)點(diǎn)編碼 [定義此節(jié)點(diǎn)所屬的上級(jí)節(jié)點(diǎn)編碼，通過此編碼來組成上下級(jí)關(guān)系]
                nodeurl: "",                 //  節(jié)點(diǎn)URL 表示當(dāng)前節(jié)點(diǎn)自定的鏈接URL地址 
                iconexpand: "",           //  節(jié)點(diǎn)展開圖標(biāo) [目錄樹節(jié)點(diǎn)自定展開狀態(tài)下顯示的圖標(biāo)，如果為空，則采用默認(rèn)的圖標(biāo)]
                iconcollapse: ""          //  節(jié)點(diǎn)收縮圖標(biāo) [目錄樹節(jié)點(diǎn)自定收縮狀態(tài)下顯示的圖標(biāo)，如果為空，則采用默認(rèn)的圖標(biāo)]
            }
        }

 第二：加載目錄樹的三種方法

         1、loadJson(Json)             JSON 對(duì)象目錄樹節(jié)點(diǎn)數(shù)組(一次性完成)

                                                   JSON 格式 是一個(gè)Array 數(shù)組  每項(xiàng)為一個(gè) nodeItem 對(duì)象的參數(shù)
                                                   [

                                                        {   nodecode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
                                                        {},...
                                                   ]

         2、loadXml(xml)                 XML字符串格式的節(jié)點(diǎn)數(shù)據(jù)(一次性完成)

                                                    說明：采用XML字符串格式  注意節(jié)點(diǎn) tagName：nodecode nodetext 等 不允許變更 因?yàn)槌绦騼?nèi)部是直接采用這個(gè)名字來獲取的         
                                                   <root>
                                                         <item>   //  每一個(gè)節(jié)點(diǎn) 內(nèi)包含多個(gè)數(shù)據(jù)值   
                                                              <nodecode><![CDATA[節(jié)點(diǎn)編碼值]]></nodecode>     
                                                              <nodetext><![CDATA[節(jié)點(diǎn)名稱文本 ]]></nodetext> 
                                                              <nodetitle><![CDATA[節(jié)點(diǎn)鼠標(biāo)移入顯示提示文本]]></nodetitle>
                                                              <supnodecode><![CDATA[節(jié)點(diǎn)所屬上級(jí)即父節(jié)點(diǎn)編碼]]></supnodecode> 
                                                              <nodeurl><![CDATA[節(jié)點(diǎn)關(guān)聯(lián)鏈接地址]]></nodeurl> 
                                                              <iconexpand><![CDATA[節(jié)點(diǎn)展開時(shí)顯示圖標(biāo)路徑]]></iconexpand>   
                                                              <iconcollapse><![CDATA[節(jié)點(diǎn)收縮時(shí)顯示圖標(biāo)路徑]]></iconcollapse>   
                                                        </item>

                                                        ... ...
                                                    </root>

         3、通過插件對(duì)象 的方法   addNodeItem(nodeItem)      通過手工一條一條的添加節(jié)點(diǎn)項(xiàng)目(需要兩步完成) 全部添加完成后
                                                  通過插件對(duì)象 makeTree()    再手工調(diào)用此方法，則可以創(chuàng)建樹

  第三：目錄樹內(nèi)部重組上下級(jí)關(guān)系的事件方法  通過此方法，可以解決我們前端不再需要按照上下級(jí)關(guān)系來區(qū)分。

        ；；；；；；；
        ；；；；；；；
        ；；；；；；；

        最終顯示效果：
        ![](https://cache.yisu.com/upload/information/20200218/64/4875.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

        由于代碼過多；直接提供下載地址：

         Tree_DEMO;[請?zhí)砑渔溄用枋鯹(http://www.sdpsoft.com/demofiles/Tree_Demo.rar)