玩转Web之easyui(二)-----easy ui 异步加载生成树节点（Tree），点击树生成tab(选项卡)

关于easy ui 异步加载生成树及点击树生成选项卡，这里直接给出代码，重点部分代码中均有注释

前台：

 $('#tree').tree({ 
         
               url: '../servlet/School_Tree?id=-1',  //向后台传送id,获取根节点
               lines:true,
               onBeforeExpand:function(node,param){  
                     $('#tree').tree('options').url = "../servlet/School_Tree?id=" + node.id;  //动态获取节点
                 },  
               loadFilter: function(data){    
                  if (data.msg){    
                      return data.msg;    
                 } else {    
                     return data;    
                 }    
            },
             onClick:function(node){                      //节点的点击事件
                   var url='information_'+node.id+'.jsp'; 
                   tab(node.text,url); 
                   
              } 
                
              
         });   

 

 function tab(text,url) {
			if ($("#tabs").tabs('exists', text)) {   //若选项卡已存在，选择该选项卡
				$("#tabs").tabs('select', text);
			} else {
				var content = "<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="
						+ url + "></iframe>";   
				
				$("#tabs").tabs('add', {   //生成新的选项卡，
					title : text,
					closable : true,
					content :content,

				});
			}
		}

 

servlet:

package thejavabean;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class School_Tree extends HttpServlet {

	
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html");
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		String theIdString = request.getParameter("id");//父节点id
		int id=Integer.parseInt(theIdString);
		List<School> list=schoolTree(id);  //获取以id为父节点的数据
        String sc="[";
        for(School school:list){
        	sc+="{";
        	List<School> l=schoolTree(school.getId());  //判断id节点的儿子节点是否有儿子节点，即判断school中的数据是否为根节点
        	if(l.size()!=0){
        	  sc+=String.format("\"id\": \"%s\", \"text\": \"%s\", \"state\": \"closed\"", school.getId() ,school.getName());
        	}else{
        		sc+=String.format("\"id\": \"%s\", \"text\": \"%s\", \"state\": \"\"", school.getId() ,school.getName());
        	}
        	sc+="},";
        }
        sc=sc.substring(0, sc.length() - 1); 
        sc+="]";
        JSONObject  jobj = new JSONObject();
		jobj.put("msg",sc);
		response.getWriter().write(jobj.toString());
		System.out.println(jobj.toString());

	}
    public List<School> schoolTree(int id){
    	StudentManage sm=new StudentManage();
    	School school=new School();
    	school.setId(id);
    	return sm.SchoolTree(school);
    }
	
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doGet(request, response);
		
	}

}

 

javabean:

 

package thejavabean;

public class School {
	
	private int id;
	private int pid;
	private String name;
   public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public int getPid() {
		return pid;
	}
	public void setPid(int pid) {
		this.pid = pid;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}

}

 

public List<School> SchoolTree(School school) {
			List<School> list = null;
			Connection conn = null;
			PreparedStatement ps = null;
			ResultSet rs = null; 
			String sql = ""; 
			
				try {
					list = new ArrayList<School>();
					conn = dbc.getConnection();
					sql = "SELECT id,pid,name FROM SchoolManage where pid= "+school.getId();
					sql.toUpperCase();
					ps = conn.prepareStatement(sql);
					rs = ps.executeQuery();
					School s = null;
					while (rs.next()) {
						s = new School();
						s.setId(rs.getInt("id"));
						s.setPid(rs.getInt("pid"));
						s.setName(rs.getString("name"));
						list.add(s);
					}
				} catch (SQLException e) {
					e.printStackTrace();
				}finally {
					dbc.colseDB(conn, ps, rs);
				} 
			return list;
		}

再来说一下数据表，共有三个字段，id，pid，name,大家可以自己写个数据表进行测试，还有DB是我简单封装过的，大家可以稍微结合自己的情况进行修改