Easyui异步生成树节点,动态获取树节点

直接上代码

前台:

// 实例化树菜单
		$("#tree").tree({
			url:'../servlet/Nodes_Do?id=0',
			 onBeforeExpand:function(node,param){  
                     $('#tree').tree('options').url = "../servlet/Nodes_Do?id=" + node.id;
                 },  
               loadFilter: function(data){    
                  if (data.msg){    
                      return data.msg;    
                 } else {    
                     return data;    
                 }    
            }, 
			lines : true,
			onClick : function(node) {
				if (node.attributes) {
					openTab(node.text, node.attributes.url);
				}
			}
		});
	});
//点击树节点center获取URL内容
		function openTab(text, url) {
			if ($("#tabs").tabs('exists', text)) {
				$("#tabs").tabs('select', text);
			} else {
				var content = "";
				$("#tabs").tabs('add', {
					title : text,
					closable : true,
					content : content
				});
			}
		}		

后台servlet:

public void doPost(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
		//System.out.println(theIdString);
		int id=Integer.parseInt(theIdString);
		List list=schoolTree(id);
		//System.out.println(list.get(1));
        String sc="[";
        for(Tree tree:list){
        	sc+="{";
        	List l=schoolTree(tree.getId());
        	if(l.size()!=0){
        	  sc+=String.format("\"id\": \"%s\", \"text\": \"%s\", \"state\": \"closed\"", tree.getId() ,tree.getText());
        	}else{
        		sc+=String.format("\"id\": \"%s\", \"text\": \"%s\", \"attributes\":  \"{%s}\" , \"state\": \"\"", tree.getId() ,tree.getText(),tree.getAttributes());
        	}
        	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 schoolTree(int id){
    	Tree t = new Tree();
    	t.setId(id);
    	return t.SchoolTree(t);
    }
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}

其他类:


public class Tree {
	private int id;
	private int pid;
	private String text;
	private String attributes;
   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 getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public String getAttributes(){
		return attributes;
	}
	public void setAttributes(String attributes){
		this.attributes = attributes;
	}
	public List SchoolTree(Tree tree) {
		List list = null;
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null; 
		String sql = ""; 
		
			try {
				list = new ArrayList();
				conn = DBConnection.getConnection();
				sql = "SELECT id,pid,text,attributes FROM tree where pid= "+tree.getId();
				sql.toUpperCase();
				ps = conn.prepareStatement(sql);
				rs = ps.executeQuery();
				Tree s = null;
				while (rs.next()) {
					s = new Tree();
					s.setId(rs.getInt("id"));
					s.setPid(rs.getInt("pid"));
					s.setText(rs.getString("text"));
					s.setAttributes(rs.getString("attributes"));
					list.add(s);
				}
			} catch (SQLException e) {
				e.printStackTrace();
			}finally {
			DBConnection.close(rs, ps, conn);
			} 
		return list;
	}
}

数据表简单设计:

Easyui异步生成树节点,动态获取树节点_第1张图片


简单说明一下,在数据库中存4个值:id,pid,text,attributes,id是主键,pid代表父节点的位置编号,text是树节点的名字,和前台树节点属性对应,attributes存放树节点指定的url,这个也是和前台树节点属性对应的。

前台先传了一个id=0代表根节点,后台根据传过来的这个值来查询这个根节点的孩子,即2、3两条,放到list里,for循环中指定 了获得数据库记录后的输出格式——json的形式,并有个判断,如果没有孩子节点了,树节点图标就以文件的形式展现,如果还有孩子,则以文件夹的形式展现。

最后效果:

点击节点右侧会弹出页面。

整个项目的下载地址:

http://download.csdn.net/detail/u011250851/7085913



你可能感兴趣的:(EasyUi)