Ztree树插件异步加载数据————实现前后代码

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发，尤其是 树状菜单、树状数据的Web显示、权限管理等等。ztree是一款开源免费软件，拥有不少粉丝功能越来越完善。

特点：

● zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载

● 采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀

● 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器

● 支持 JSON 数据

● 支持静态和 Ajax 异步加载节点数据

● 支持任意更换皮肤 / 自定义图标（依靠css）

● 支持极其灵活的 checkbox 或 radio 选择功能

● 提供多种事件响应回调

● 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟

● 在一个页面内可同时生成多个 Tree 实例

● 简单的参数配置实现 灵活多变的功能

我是根据地区的表实现的一个简单的ztree树的异步加载包含单选节点的功能，下面是代码实现。

代码部分

数据库表结构

CREATE TABLE `wx_area` (
  `ID` int(9) NOT NULL AUTO_INCREMENT COMMENT '主键 编号',
  `PARENT_ID` int(9) DEFAULT NULL COMMENT '父ID',
  `AREA_NAME` varchar(30) DEFAULT NULL COMMENT '城市名称',
  `SHORT_NAME` varchar(30) DEFAULT NULL COMMENT '简称',
  `LONGITUDE` varchar(20) DEFAULT NULL COMMENT '经度',
  `LATITUDE` varchar(20) DEFAULT NULL COMMENT '纬度',
  `LEVEL` int(3) DEFAULT NULL COMMENT '等级',
  `SORT` int(6) DEFAULT NULL COMMENT '排序',
  `AREA_TIME` datetime DEFAULT NULL COMMENT '创建时间',
  `STATUS` int(2) DEFAULT NULL COMMENT '状态',
  PRIMARY KEY (`ID`)
) ENGINE=InnoDB AUTO_INCREMENT=659004508 DEFAULT CHARSE

后台java--controller部分

	/**
	 * 
	* @Title: index 
	* @Description: TODO(页面跳转)
	* @param @param model
	* @param @param request
	* @param @return    设定文件 
	* @return String    返回类型 
	* @author YYZ
	* @throws
	 */
	@RequestMapping("index")
	public String index(ModelMap model, HttpServletRequest request) {
		return BASEPATH + "index_ztree";
	}
	/**
	 * 
	* @Title: ztreeData 
	* @Description: TODO(ztree异步树加载数据)
	* @param @param parent
	* @param @param request
	* @param @param response
	* @param @return    设定文件 
	* @return JSONObject    返回类型 
	* @author YYZ
	* @throws
	 */
	@RequestMapping(value = "ztreeData",method=RequestMethod.POST)
	@ResponseBody
	public String ztreeData(@RequestParam("id") Integer id, HttpServletRequest request, HttpServletResponse response){
		if(id == null){//父级节点为空时，默认为顶级
			id = 0;
		}
		WxAreaExample example=new WxAreaExample();
		example.createCriteria().andParentIdEqualTo(id);
		List<WxArea > modules = wxAreaService.selectByExampleWithBLOBs(WxArea .class, example);
		//判断子节点、父节点
		for (WxArea wxArea : modules) {
			Integer isParent = 0;//默认值为0
			WxAreaExample sunarea=new WxAreaExample();
			sunarea.createCriteria().andParentIdEqualTo(wxArea.getId());
			List<WxArea > sunlist = wxAreaService.selectByExampleWithBLOBs(WxArea .class, sunarea);
			if(sunlist != null && sunlist.size() > 0){
				isParent = modules.size();
			}
			wxArea.setIsParent(isParent);
		}
		//处理数据为树型数据
		String json =JSONObject.toJSON(TreeViewHelp.area2Node(modules)).toString();
		return json;
	}

映射实体类和工具类

/**
*地区实体映射
*/
public class WxArea {
    private Integer id;

    private Integer parentId;

    private String areaName;

    private String shortName;

    private String longitude;

    private String latitude;

    private Integer level;

    private Integer sort;

    private Date areaTime;
    
    private String  towns;
    
    private Integer isParent;//ztree用
    //get...set...
}
/**
 * 
 * 树处理工具
 *
 */
public class TreeViewHelp {

	public static List<Node> area2Node(List<WxArea> items) {
		List<Node> nodes = new ArrayList<Node>();
		if(items==null || items.size()==0){
			return nodes;
		}
		for (WxArea item : items) {
			Node node = new Node();
			node.setId(item.getId());
			node.setText(item.getAreaName());
			node.setName(item.getAreaName());
			node.setIsParent(item.getIsParent());
			node.setParent(item.getParentId());
			nodes.add(node);
		}
		return nodes;
	}
}
/**
*树结构映射类
*/
public class Node {

	private Integer id;

	private String text;

	private Integer parent;//父级ID
	
	private String name;//ztree用
	
	private Integer isParent;//ztree用

	private boolean selectable = true;

	private boolean disabled = false;

	private boolean selected = false;

	private String icon = "glyphicon glyphicon-unchecked";
        //get...set..
}

html页面代码

<link href="${contextPath}/custom/css/zTreeStyle.css" rel="stylesheet">
<script src="${contextPath}/custom/js/jquery.ztree.core.js"></script>
<script src="${contextPath}/custom/js/jquery.ztree.excheck.js"></script>


<input type="hidden" name="id" id="id" value="" hasChild="false"/>
<div>
    <ul id="demotree" class="ztree"></ul>
</div>

js功能代码

<script type="text/javascript">
    var setting = { 
  	    async:{ //异步加载
		   	enable: true, //[setting.async.enable = true 时生效]
		   	url: base + "/area/ztreeData.json", 
		   	autoParam: ["id"],//异步加载时需要自动提交父节点属性的参数。
			dataFilter: filter//用于对 Ajax 返回数据进行预处理的函数。
	    }, 
		check: {//单选
			enable: true,
			chkStyle: "radio",
			radioType: "all"//all范围整棵树level每一级
		},
		callback: {
			beforeCheck: beforeCheck,
			onCheck: onCheck
		},
		data: {
			simpleData: {
				enable: true
			}
		},
		checkable : true //每个节点上是否显示 CheckBox 
	};
 	var zTree;
	var treeNodes;
	$(function(){
	    //初始化树
	    areaZtreeData();
	});
	//初始化节点 
	$(document).ready(function(){
		$.fn.zTree.init($("#demotree"), setting, treeNodes); 
	});
	//初始化树数组
	function areaZtreeData(){
		$.ajax({
			async : false,
			cache:false, 
			type: 'POST', 
			dataType : "json", 
			url: base + "/area/ztreeData.json",//请求的action路径 
			data:{"id":0},
			error: function () {
				//请求失败处理函数 
				alert('请求失败');
			}, 
			success:function(data){
				//请求成功后处理函数。 
				treeNodes = eval(data); //把后台封装好的简单Json格式赋给treeNodes 
			} 
		}); 		
	}
	//数据处理
	function filter(treeId, parentNode, childNodes) {
		if (!childNodes) return null;
		for (var i=0, l=childNodes.length; i<l; i++) {
			childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
		}
		return childNodes;
	}
	//触发点击事件
	function onCheck(e, treeId, treeNode) {
		$('#id').val(treeNode.id);
	}
	//禁止点击
	function beforeCheck(treeId, treeNode) {
		//可以进行部分逻辑判断
		return true;
	}
</script>

运行结构显示