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 = "<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="
						+ url + "></iframe>";
				$("#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<Tree> list=schoolTree(id);
		//System.out.println(list.get(1));
        String sc="[";
        for(Tree tree:list){
        	sc+="{";
        	List<Tree> 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<Tree> 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<Tree> SchoolTree(Tree tree) {
		List<Tree> list = null;
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null; 
		String sql = ""; 
		
			try {
				list = new ArrayList<Tree>();
				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;
	}
}

数据表简单设计:



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

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

最后效果:

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

整个项目的下载地址:

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


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值