Display Tree __web in Web

Source: Internet
Author: User
Tags first row stringbuffer
You need to display a tree in the web, which is a treemodel from server-side program queries.
The basic idea is: use JavaScript to show the tree, JSP to generate the page containing the JS code.

There are two key points,
One: How does JavaScript show trees?
Two: How does TreeModel give JavaScript a show? (This is related to the implementation interface of one).

One: JavaScript display:
First, the good news is that JavaScript has a lot of free libraries and it's easy to find one:
We use Tigra tree, the download address is:
http://www.softcomplex.com/products/tigra_tree_menu/
Very simple to use:

1: Use the downloaded code tree.js (if you do not do special processing, you do not have to change)
<script language= "JavaScript" src= "Js/tree.js" ></script>

2: First use the definition library of the default tree icon.
<script language= "JavaScript" src= "Js/tree_tpl.js" ></script>
Note: Target in the first row is the destination page that defines the click Navigation.
Other icons can be changed as needed. Icon file in the download demo's icons directory.

3: OK, here's the key, defining the tree's data variables:
Variable names must be TREE_ITEMS, structure, very simple, look at the example:
var tree_items = [
[' Home ', ' http://www.softcomplex.com/index.html ',
[' Services ', ' http://www.softcomplex.com/services.html '],
[' Download ', ' http://www.softcomplex.com/download.html '],
[' Order ', ' http://www.softcomplex.com/order.html '],
[' Support ', ' http://www.softcomplex.com/support.html '],
],
[' Level 0 Item 1 ', NULL,
[' Level 1 Item 0 ', ' links.html '],
[' Level 1 Item 1 ', 0,
[' Level 2 Item 0 '],
[' Level 2 Item 1 ', 0],
],
[' Level 1 Item 2 '],
[' Level 1 Item 3 '],
]
];
I think this is no need to explain, to see the effect of the sample is clear.
In fact, the tree_items here needs to be dynamically generated, I define variable treeitems in the JSP to generate, here directly assigned value is good. < script language = "JavaScript" >
var tree_items = <%= Treeitems%>;
</script >
Second: How to export data from TreeModel Tree_items
This generally has two kinds of practice, one is direct recursive generation, the other is the gentleman into XML, and then use XSLT to convert to the Tree_items string in the required format.
In fact, the use of recursive generation is very simple, so I use the first:

public class Treeitemutil
{
static private StringBuffer sbtreeitems = null;
Static private String subjectname= "";
static public String Createtreeitems (TreeNode node)
... {
Sbtreeitems = new StringBuffer ();
Totreeitem (node);
return sbtreeitems.tostring ();
}

static private void Totreeitem (TreeNode node)
... {
if (Node.isleaf ())
... {
String info = "";
Object obj = ((defaultmutabletreenode) node). Getuserobject ();
Take display value caption and command execution related parameters cmd
......
Sbtreeitems.append ("['" + caption + "', '" + cmd + "'],");
}
Else
... {
Object obj = ((defaultmutabletreenode) node). Getuserobject ();
Take a display value, generally there is no command, because the Non-leaf node, so give 0 value.
......
Sbtreeitems.append ("['" + caption + "', 0,");
for (int i = 0; i < Node.getchildcount (); i++)
... {
Totreeitem (Node.getchildat (i));
}
Sbtreeitems.append ("],");
}
}
}
Call Createtreeitems, the root node of the TreeModel is passed in, you can get the string you need.
Well, that's probably it.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.