Tree display data-Use of dhtmlxTree

In Java Web project development, JSP is generally used for front-end data display, and the backend is used for efficient development through the SSH framework, with process control, business processing, and various database processing, the data is stored in Oracle and other selected databases. Now, we want to have the most dealings with users? It's easy. How do users deal with systems through pages? The data presentation method determines the user's evaluation of the system to a large extent. Here, we will briefly summarize several other friendly and Practical Data Display Methods besides html. This blog shows you how to display data in a tree!

 

Tree display means to display the data queried from the database in the form of a tree. So what data is suitable for Tree display? For example, some level-specific organization information and job information with clear permissions? As long as there is such an upper-and lower-level relationship, the hierarchical relationship is clear, and the information of the Self-associated tables used in the database to store data is suitable for Tree display, so that users can easily find the root node, and the right to each node. The tree structure of the resource manager in the operating system brings much convenience to everyone.

 

In Java Web development, we can use some plug-ins to implement this function. Here we will summarize the dhtmlxTree that I use, which can display our data into the shape of a tree, zhang kechi is very convenient. Approximate graph:

I. First, let's talk about the principle of implementing the tree structure. Use this plug-in to implement the tree structure, we need to recursively process the hierarchical data found in the database into a layer-by-layer Nested XML file, and then recursively read the XML file through the plug-in, it is displayed as a tree structure. Is a powerful encapsulation of js Code.

2. Let's take a look at its simple use!

1. The action layer goes through the dao layer and the Service processes the data to be queried. In the action layer, We need to recursively process the data and output the data to the browser through the output stream, let the front-end capture. Here we will take a look at recursively constructing xml file strings with hierarchies:

/*** Tree builder * @ author Administrator */public class OrgTreeBuilder {// private Org root of the input tree and node; // concatenate xml files using this tool, note that StringBuilder is selected for higher efficiency. private StringBuilder treeString = new StringBuilder (128); // constructor. The parameter is the root node public OrgTreeBuilder (Org root) {this. root = root;}/*** build tree * @ return */public String build () {// xml header treeString. append ("<? Xml version = \ "1.0 \" encoding = \ "UTF-8 \"?> "); TreeString. append ("<tree id = \" 0 \ ">"); // call the buildNode (root) function to build a subnode; treeString. append ("</tree>"); // converts the constructed tree to a string return, facilitating the return treeString output by the action. toString ();}/*** content for constructing a tree node */private void buildNode (Org org) {// process treeString with special characters. append ("<item text = \" "); treeString. append (org. getName (); treeString. append ("\" id = \ ""); treeString. append (org. getId (); treeString. append ("\"> "); // view the subnode Set of this node <Org> orgSet = org. getChildOrgSet (); // If a subnode exists, call this function recursively. for (Org obj: orgSet) {buildNode (obj);} treeString. append ("</item> ");}}

In the action layer, you only need to output the data in xml format:

// Output XML Format String response. setContentType ("text/xml; charset = UTF-8"); response. getWriter (). print (obj );

2. Pay attention to the fact that the xml file of the generated hierarchy has certain specifications. Let's take a look:

<?xml version="1.0" encoding="utf-8"?><tree id="0">   <item text="xxxxx" id="-1"  open="1"   checked="1"><item text="yyyy" id="1"><item text="zzzz" id="2"/></item>   </item></tree>

Briefly describe the meaning of the parameters:

Id: Unique identifier of a node

Text: The display name of the node.

Open: indicates whether the node needs to be expanded. The value is arbitrary.

Checked: indicates whether the node is fully selected and the value is arbitrary. (Note that when all the child nodes of a node are selected, the node is fully selected. Otherwise, the node is not fully selected, there are three options for tree selection. It also facilitates data acquisition and display .)

 

3. In the JSP page, we need to introduce the location where we put this tree. Here we can provide a div, and then we need to rely on JS Code to complete the function. Take a look

HTML: <divid = "treebox_tree"> </div>

JS:

// Create a tree component object

Tree = newdhtmlXTreeObject ("treeboxbox_tree", "100%", "100%", 0 );

// Set the skin (style) of the component)

Tree. setImagePath ("dhtmlxtree/imgs/csh_yellowbooks /");

// Use the checkbox tree component (two lines of code are available)

Tree. enableCheckBoxes (1); // 1: indicates that checkbox is added; 0: indicates that checkbox is canceled.

Tree. enableThreeStateCheckboxes (true); // whether to cascade selected

 

// Load data. Write the data to our action access path.

Tree. loadXML ("/org/buildTree. action ");

 

4. For a tree with check boxes, you can add, delete, modify, query, and perform other operations. Here, let's take a look at common operations on Tree nodes!

A. Set click events.

Tree. setOnClickHandler (doOnClick );

FunctiondoOnClick (){

Parent. orgWorkareaFrame. location = "detail.html ";

}

 

B. add nodes.

Tree. insertNewChild (parent node ID, new node ID, new node name );

 

C. modify a node

Tree. setItemText (node ID, new node name );

 

D. delete a node.

Tree. deleteItem (node ID, whether to select the parent node after deletion );

 

E. query nodes

Tree. getSelectedItemId (); // obtain the ID of the selected node

Tree. getAllChecked (); // obtain the node ID of the fully selected check box

Tree. getAllCheckedBranches (); // obtain the node ID of all selected check boxes (including not fully selected)

Tree. hasChildren (parent node ID); // obtains the number of all child nodes of a node to determine whether a child node exists.

 

Of course, here are some common tree operations. For more operations, see here:DhtmlxTreeIntroduction

 

 

Here is a simple summary of dhtmlxTree, which is a very easy-to-use and practical plug-in for generating trees. It can make our system display more reasonable and greatly improve user experience. Of course, there are some other tree-generating plug-ins, which can be summarized later.

 

Here we use a tree to show some data with hierarchies, but in some cases, we also need to present the data as a pie chart and a column chart, you may also need to use excel to download files. This is often the case, so we will make a brief summary of the last two blogs.