【简介】
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这就可以一级一级加载树，而不会一次性加载，导致树加载缓慢问题
