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属性那修改成所需的就好了。

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