ztree+Ajxa 动态树形图实例展示

最近在做一个项目，其中要做一个树形图，在网上搜了很多，发现没有具体的实例，全是copyZtree的API文档，没啥用。通过多方打听及自己的总结整理了一个，希望有点用处吧。

HTML代码

var zTree;     var setting = {       view: {         dblClickExpand: false,//双击节点时，是否自动展开父节点的标识         showLine: true,//是否显示节点之间的连线         selectedMulti: false //设置是否允许同时选中多个节点       },              data: {         simpleData: {//简单数据模式           enable:true,           idKey: "id",           pIdKey: "pId"         }       },       callback: {         beforeClick: function(treeId, treeNode) {           zTree = $.fn.zTree.getZTreeObj("treeDemo");           if (treeNode.isParent) {             zTree.expandNode(treeNode);//如果是父节点，则展开该节点           }else{             zTree.checkNode(treeNode, !treeNode.checked, true, true);//单击勾选，再次单击取消勾选           }         }       }     };          $(document).ready(function(){       onLoadZTree();     });          //加载树形结构数据     function onLoadZTree(){       var treeNodes;       $.ajax({         async:false,//是否异步         type:'POST',//请求方式：post         dataType:'json',//数据传输格式：json         url:"${pageContext.request.contextPath}/ShujuServlet",//请求的action路径         error:function(){           //请求失败处理函数           alert('请求失败！');         },         success:function(data){           //console.log(data);           //请求成功后处理函数           treeNodes = data;//把后台封装好的简单Json格式赋给treeNodes                   }       });         var t = $("#treeDemo");       t = $.fn.zTree.init(t, setting, treeNodes);     }

这是script中的代码，其他的和普通的ztree一样。

servlet中代码

public void doGet(HttpServletRequest request, HttpServletResponse response)             throws ServletException, IOException {         List<LpgShuju> shujuList = new LpgShujuDao().showShuju();                  String josnstr = JSONArray.toJSONString(shujuList);                  response.setCharacterEncoding("utf-8");         PrintWriter out = response.getWriter();         out.print(josnstr);         out.flush();         out.close();     }

这里要注意，文字转码和fastjson的版本，我之前用的1.1.33的版本，转json时少了一个字段属性，改成1.2.2之后就好了。

数据库表

为了对应setting中的id和pid ,所以把数据表的字段改成一样的，不一样的可以在idkey和pidkey属性那修改成所需的就好了。

最后看一下效果图,第一次发，轻喷。