JS--插件： 樹Tree 開發與實現

日常在Web項目開發時，經常會碰到樹形架構數據的顯示，從數據庫中獲取數據，并且顯示成樹形。為了方便，我們可以寫一個javascript的一個跨瀏覽器樹控件，后續可以重復使用。本節分享一個自己開發的JS tree插件，對有需要的朋友可以直接下載使用。

Tree插件 需要實現

   （1）、自動將數據組織成上下級關系，這樣我們在前端手工添加數據或者從數據庫中獲取到的數據不需要我們來組織上下級關系

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

   （3）、實現樹節點的選擇（單選、復選[級聯選擇]）功能

   （4）、支持大數據的一次性加載

   。。。。。。

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

第一：插件中每個樹節點Node的參數JSON對象如下所示

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

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

         1、loadJson(Json)             JSON 對象目錄樹節點數組(一次性完成)

                                                   JSON 格式 是一個Array 數組  每項為一個 nodeItem 對象的參數
                                                   [

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

         2、loadXml(xml)                 XML字符串格式的節點數據(一次性完成)

                                                    說明：采用XML字符串格式  注意節點 tagName：nodecode nodetext 等 不允許變更 因為程序內部是直接采用這個名字來獲取的         
                                                   <root>
                                                         <item>   //  每一個節點 內包含多個數據值   
                                                              <nodecode><![CDATA[節點編碼值]]></nodecode>     
                                                              <nodetext><![CDATA[節點名稱文本 ]]></nodetext> 
                                                              <nodetitle><![CDATA[節點鼠標移入顯示提示文本]]></nodetitle>
                                                              <supnodecode><![CDATA[節點所屬上級即父節點編碼]]></supnodecode> 
                                                              <nodeurl><![CDATA[節點關聯鏈接地址]]></nodeurl> 
                                                              <iconexpand><![CDATA[節點展開時顯示圖標路徑]]></iconexpand>   
                                                              <iconcollapse><![CDATA[節點收縮時顯示圖標路徑]]></iconcollapse>   
                                                        </item>

                                                        ... ...
                                                    </root>

         3、通過插件對象 的方法   addNodeItem(nodeItem)      通過手工一條一條的添加節點項目(需要兩步完成) 全部添加完成后
                                                  通過插件對象 makeTree()    再手工調用此方法，則可以創建樹

  第三：目錄樹內部重組上下級關系的事件方法  通過此方法，可以解決我們前端不再需要按照上下級關系來區分。

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

        最終顯示效果：
        ![](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;[請添加鏈接描述](http://www.sdpsoft.com/demofiles/Tree_Demo.rar)