JS--Plugin: Tree Development and Implementation Attachment is downloadable!!

szxiaxiaojun · Posted on 7/11/2019 11:20:12 AM

This post was last edited by szxiaxiaojun on 2019-7-11 11:20

In daily web project development, we often encounter the display of tree structure data, which is obtained from the database and displayed in a tree shape. For convenience, we can write a cross-browser tree control for JavaScript that can be reused in the future. This section shares a self-developed JS tree plugin, which can be downloaded and used directly for friends in need.

Tree plugin needs to be implemented

(1) Automatically organize data into subordinate relationships, so that we do not need to organize the relationship between superiors and subordinates by manually adding data or obtaining data from the database on the front-end

(2) Support custom loading directory tree Support data loading in XML and JSON formats

(3) Realize the function of selecting tree nodes (single selection, multiple selection [cascade selection]).

(4) Support one-time loading of big data

。。。。。。

Let's start sharing a Tree plugin I wrote: This plugin is based on Jquery and needs references

First: The parameter JSON object of each tree node in the plugin is shown below

         nodeItem: function () {
            return {
                  nodecode: "", // nodecode
                  nodetext: "", // node text [node display text]
                  nodetitle: "", // node title [node text for mouse movement obsolete display]
                  supnodecode: "", // Superior node code [define the parent node code to which this node belongs, and form a subordinate relationship through this code]
                  nodeurl: "", // node URL represents the link URL address customized by the current node
                  iconexpand: "", // Node Expand Icon [Icon displayed in the directory tree node in the customized expanded state, if empty, the default icon is used]
                  iconcollapse: "" // Node Shrink Icon [Icon displayed in the directory tree node in a custom shrink state, if empty, the default icon is used]
            }
         }

Second: Three ways to load the directory tree

1. loadJson(Json) JSON object directory tree node array (completed at one time)

The JSON format is an array of arguments for each item of a nodeItem object
[

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

2. loadXml(xml) XML string format node data (one-time completion)

                                                      Note: Use XML string format Note that node tagName:nodecode nodetext, etc. are not allowed to be changed, because the program is directly obtained by using this name
                                                   <root>
                                                         <item> // Each node contains multiple data values
                                                               <nodecode><![CDATA[node encoding value]]></nodecode>
                                                               <nodetext><![CDATA[node name text]]]></nodetext>
                                                               <nodetitle><![CDATA[node mouse move in display prompt text]]></nodetitle>
                                                               <supnodecode><![CDATA[Node parent encoding]]></supnodecode>
                                                               <nodeurl><![CDATA[Node Associated Link Address]]></nodeurl>
                                                               <iconexpand><![CDATA[Show icon path when node expanded]]></iconexpand>
                                                               <iconcollapse><![CDATA[Show icon path when node shrinks]]></iconcollapse>
                                                         </item>

... ...
</root>

3. Add node items manually one by one (two steps to complete) through the method of addNodeItem(nodeItem) through the method of plug-in objects
You can create a tree by calling this method manually through the plugin object makeTree().

Third: Event method for reorganizing the relationship between subordinates and subordinates within the directory tree Through this method, we can solve the problem that our front-end no longer needs to distinguish according to the relationship between subordinates and subordinates.

Login is visible.

Fourth: The above is just a brief introduction to the main loading and reorganization methods of Tree. Below we will post the full JS plugin code with detailed comments in the code

Plug-in functions: check, single, expand, fold, show/hide node connection, support inserting nodes, deleting nodes, customizing node icons, setting node selection, obtaining directory tree selection nodes (support XML, JSON, etc.)

Right-click menu (not supported for the time being, because the pop-up layer needs to be used, this function is blocked and removed) Support node clicking, double-clicking, node selection change events, etc

The final display effect

Attachment download:

Tree_Demo.rar (54.71 KB, Number of downloads: 1)

[JavaScript] JS--Plugin: Tree Development and Implementation Attachment is downloadable!!