ztree一级一级加载，解决数据过大加载缓慢问题

【简介】

zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件

•  兼容 IE、FireFox、Chrome 等浏览器
•  在一个页面内可同时生成多个 Tree 实例
•  支持 JSON 数据
•  支持一次性静态生成 和 Ajax 异步加载 两种方式
•  支持多种事件响应及反馈
•  支持 Tree 的节点移动、编辑、删除
•  支持任意更换皮肤 / 个性化图标（依靠css）
•  支持极其灵活的 checkbox 或 radio 选择功能
•  简单的参数配置实现 灵活多变的功能

ztree 官网API http://www.treejs.cn/v3/api.php

处理流程，先加载顶部节点，根据调用树的点击事件 通过treeObj.addNodes(null, newNodes); 给树添加子节点

js setting 简单配置：

var zTreeObj;
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
                check: {
                    enable: false,
                    
                    //nocheckInherit: false
                    //chkStyle: 'checkbox',
                    
                   //chkboxType: { "Y": "ps", "N": "ps" }
                },
                view : {
                       selectedMulti: false,
                       showIcon: true,  //设置是否显示节点图标
                       showLine: true,  //设置是否显示节点与节点之间的连线
                      // fontCss: setFontCss
                   },
                async: {
                    enable: true, // 设置 zTree是否开启异步加载模式  加载全部信息
                    url: "", // Ajax 获取数据的 URL 地址  
                    autoParam: ["id"],    // 异步加载时自动提交父节点属性的参数,假设父节点 node = {id:1, name:"test"}，异步加载时，提交参数 zId=1   
                    //dataFilter: filter
                },
                callback: {
                    onClick: zTreeOnOnClick//点击事件
                },
                data: { // 必须使用data  
                    simpleData: {
                        enable: true,
                        idKey: "id", // id编号命名 默认  
                        pIdKey: "pId", // 父id编号命名 默认  
                        rootPId: 0 // 用于修正根节点父节点数据，即 pIdKey 指定的属性值  
                    }
                }
        };

// js 初始化 加载顶级节点

$(document).ready(function(){
			//显示区域树
			   $.ajax({
		        type: "POST",
		        url: "kks/kks_list.do",
		        data: {},
		        dataType:"json",
		        success: function(data){
		       
		     	       zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, data.data);
		        },
		     });
			 
		});

ajax调用后台代码

@ResponseBody
@RequestMapping(value="kks_list")
	public Map<String,Object> queryRegion(){
		Map<String,Object> map = new HashMap<String,Object>();
		logger.info("======>进入queryRegion方法");
		try {
			
			JSONArray jsonArray = new JSONArray();
			List<DeviceInfo> list = deviceInfoService.queryByParentCode("KKS顶点");//第一次加载顶部数据
			if(list !=null && list.size()>0){
				for(int i = 0 ; i<list.size() ; i++){
					
					DeviceInfo deviceInfo = list.get(i);
					JSONObject json = new JSONObject();
					json.put("id", deviceInfo.getDeviceCode());
					json.put("pId", deviceInfo.getParentTreeCode());
					json.put("name", deviceInfo.getDescription());
					json.put("rfid", deviceInfo.getRfId());
					json.put("icon", "resources/images/kksIcon.png");
					
					jsonArray.add(json);
				}
				
				map.put("data", jsonArray);
			}
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
			logger.info("queryRegion error");
		}
		logger.info("<======= 已退出queryRegion方法");
		return map;
		
	}

//树的点击事件 通过ajax获取数据 通过 treeObj.addNodes(null, newNodes);方法添加子节点

 function zTreeOnOnClick(event, treeId, treeNode){
    	   var treeObj = $.fn.zTree.getZTreeObj(treeId);
    	   var node = treeObj.getNodeByTId(treeNode.tId);
    	 //没有子节点才去查询
    		if(node.children == null || node.children == "undefined"){
    			$.ajax({
    				type: "POST",
    				async:false,
    				url: "kks/queryParenCodeY.do",
    				data:{
    					deviceCode:treeNode.id
    				},
    				dataType:"json",
    				success: function(data){
    					if(data.data !=null && data.data !=""){
    						//添加新节点
    						newNode = treeObj.addNodes(node, data.data);
    					}
    				},
    				error:function(event, XMLHttpRequest, ajaxOptions, thrownError){
    					result = true;
    					alert("请求失败!");
    				}
    			});
    		}

后台代码

@ResponseBody
	@RequestMapping(value="queryParenCodeY")
	public Map<String,Object> queryParenCodeY(@RequestParam("deviceCode") String deviceCode){
		logger.info("======>进入queryParenCodeY方法");

		Map<String,Object> map = new HashMap<String, Object>();
		try {
			JSONArray jsonArray = new JSONArray();
			List<DeviceInfo> list = deviceInfoService.queryByParentCode(deviceCode);
			if(list !=null && list.size()>0){
				for(int i = 0; i<list.size(); i++){
					DeviceInfo deviceInfo = list.get(i);
					
					JSONObject json = new JSONObject();
					json.put("id", deviceInfo.getDeviceCode());
					json.put("pId", deviceCode);
					json.put("name", deviceInfo.getDescription());
					json.put("rfid", deviceInfo.getRfId());
					json.put("icon", "resources/images/kksIcon.png");
					
					jsonArray.add(json);
				}
			}
			
			map.put("data", jsonArray);
		} catch (Exception e) {
			e.printStackTrace();
			logger.info("queryParenCodeY error");

		}
		logger.info("======>退出queryParenCodeY方法");

		return map;
	}

这样点击树时就会掉用点击事件，将树的id传到后台，作为新加入节点的父节点Id

这就可以一级一级加载树，而不会一次性加载，导致树加载缓慢问题