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

【简介】

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

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

ztree 官网API http://www.treejs.cn/v3/api. href="http://lib.csdn.net/base/php" target=_blank>PHP

处理流程，先加载顶部节点，根据调用树的点击事件 通过

treeObj.addNodes(null, newNodes);

 给树添加子节点

js setting 简单配置：

[javascript] view
plain copy

 print?

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 初始化 加载顶级节点

[javascript] view
plain copy

 print?

$(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调用后台代码

[java] view
plain copy

 print?

@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);方法添加子节点

 

[javascript] view
plain copy

 print?

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("请求失败!");  

                }  

            });  

        }  

后台代码

[java] view
plain copy

 print?

@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

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