zTree学习笔记（一）——第一个入门实例

用了小一天的时间学习了zTree插件，做出了一个地区树的小例子，感觉这个插件真的蛮强大的，实现的过程中也遇到了一些困惑，现在总结一下。

从官网http://www.ztree.me/v3/main.php#_zTreeInfo 下载zTree插件，项目中导入js、css和image，zTree有很多扩展js，暂时没有用上，所以只导入jquery.ztree.core.js就可以了，当然还要导入jquery.min.js，css需要导入zTreeStyle.css，而demo.css中有很多样式，如果需要用到的话也可以导入。

首先页面需要一个输入框，通过点击输入框弹出树列表，选择完地区后可以显示地区名称，当然还需要一个隐藏的输入字段来保存地区的ID。

地区：
      

然后需要树的容器，一个

列表，class必须是ztree。

之后需要编写java类来传列表中的数据，zTree接收的数据是如同json一样的格式，所以这里将数据放进jsonArray中，然后转成String类型。

如果是一次全部加载，直接取出所有结果放到jsonArray中即可。下面主要说明异步加载。

先取根节点的数据，这里的根节点只有一个中国，所以直接取得。

public String getAreaRoot(){
	JSONArray jsonArray = new JSONArray();
	String sql = "select area_id,area_name from t_area where area_id=0";
	ps = conn.prepareStatement(sql);
	rs = ps.executeQuery();
	while(rs.next){
		JSONObject jsonObject = new JSONObject();
		jsonObject.put("areaId", rs.getLong("area_id"));
		jsonObject.put("areaName", rs.getString("area_name"));
		jsonObject.put("isParent", "true"); //判断是否有子节点，就是前面有没有那个小加号可以展开
		jsonArray.add(jsonObject);
	}
	return jsonArray.toString();
}

对于选择一个地区展开其下列表，需要获取这个地区ID，查询父级parent_id为该地区ID的所有结果，查询的同时还要得到每个结果是否还有子集。

public String getAreaChild(long id){
	JSONArray jsonArray = new JSONArray();
	String sql = "select area_id,area_name,parent_id,(select count(*) from t_area where t_area.parent_id=t.area_id) count from t_area t where parent_id=?";
	ps.setString(1,id);
	ps = conn.prepareStatement(sql);
	rs = ps.executeQuery();
	while(rs.next){
		JSONObject jsonObject = new JSONObject();
		jsonObject.put("areaId", rs.getLong("area_id"));
		jsonObject.put("areaName", rs.getString("area_name"));
		jsonObject.put("parentId", rs.getLong("parent_id"));
		jsonObject.put("isParent", "true"); 
		jsonArray.add(jsonObject);
	}
	return jsonArray.toString();
}

下面通过action或者servlet将结果传递给页面。

public String getIPArea() throws Exception{
	String jsonObj = new AreaTree().getAreaRoot();
	request.setAttribute("jsonObj", jsonObj);
	return "suc";
}
//这个方法困扰了我很久，两个点，
//一个是js部分中的url应该连到此方法；
//第二是通过HttpServletResponse去传递结果，这是ajax机制，可惜没有深入学
public void asyncTree() throws Exception{
	HttpServletResponse response;
	response.setCharacterEncoding("utf-8");
	PrintWriter out = response.getWriter();
	String jsonObj = new AreaTree().getAreaChild(this.getAreaId());
	out.print(jsonObj);
}

关键的javascript部分，官网的API很详细，都是参照写的，http://www.ztree.me/v3/api.php

最后上效果图：