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://s1.51cto.com/images/blog/201907/11/c9c84b107f5f9027da4199d8802bd68c.png?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)