JQuery Treeview 初级（1）

JQuery Treeview的例程的搭建 ：

1. 到http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ 去下载jquery.treeview.zip压缩包文件。
2. 在MyEclipse中新建一个web project项目，例如命名为treeview。
3. 将jquery.treeview.zip解压，将解压后的所有文件拷贝到treeview项目的WebRoot目录下。
4. 部署treeview项目到tomcat，启动tomcat。
5. 在地址栏中输入http://localhost:8080/treeview/demo，可以查看jquery treeview自带的例子程序。
6. 在MyEclipse中试着将demo中的例子程序进行改动，看有什么变化，例如，改改simple.html页面中的某些标签的clss属性等。
7. 编写一个servlet，试着用java生成和simple.html中内容相同的html内容。

编写服务器端的代码：

     编写一个具有树形结构的实体类（Organization）：

       import java.util.List; public class Organization { private int id; private String name; private String code; private List children; private Organization parent; public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getCode() { return code; } public void setCode(String code) { this.code = code; } public List getChildren() { return children; } public void setChildren(List children) { this.children = children; } public Organization getParent() { return parent; } public void setParent(Organization parent) { this.parent = parent; } public Organization(int id, String name, String code) { super(); this.id = id; this.name = name; this.code = code; } public Organization() { super(); } }
       编写一个servlet：

      import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class TreeTestServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); StringBuffer sb = new StringBuffer(); Organization parent = new Organization(0, "parent", "1000"); Organization child1 = new Organization(1, "child1", "1001"); Organization child2 = new Organization(2, "child2", "1002"); Organization child3 = new Organization(3, "child1child1", "1003"); Organization child4 = new Organization(4, "child1child2", "1004"); List children1 = new ArrayList(); children1.add(child3); children1.add(child4); child1.setChildren(children1); List children2 = new ArrayList(); children2.add(child1); children2.add(child2); parent.setChildren(children2); sb.append("<ul id=/"browser/" class=/"filetree treeview-famfamfam/">"); printTree(parent, sb); sb.append("</ul>"); out.println(sb.toString()); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); } /** * 客户端树形html * * @param root * @param sb * @return */ private String printTree(Organization root, StringBuffer sb) { if (root != null) { if (root.getChildren() == null || root.getChildren().size() == 0) { return sb.append("<ul><li class='file'><span class='file'>") .append(root.getName()).append("</span></li></ul>") .toString(); } else { sb.append("<ul><li class='closed'><span class='folder'>") .append(root.getName()).append("</span>"); for (Iterator iter = root.getChildren().iterator(); iter .hasNext();) { Organization org = (Organization) iter.next(); printTree(org, sb); } sb.append("</li></ul>"); return sb.toString(); } } else { return ""; } } } 

      上述sevlet中生成的html代码是根据simple.html中的代码结构生成的，因此可维护性不好。此处仅仅是实现了一个例程，即先搭建一个可以运行的例程，然后通过修改可以使用jquery treeview。