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。