jquery的树ztree常见的问题及使用

关于ztree基本使用

1、JSP导入css和js包

 <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
 <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
 <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
 <script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>

2、JSP获取后台拼接的值

<%

String treeData=request.getAttribute("treedata").toString();
%>

3、JS中获取treeData

var setting = {
     };
    var zNodes=<%=treeData%>;

  $(document).ready(function(){
   $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  });

4、jsp标签

    <div class="content_wrap" align="top">
  <ul id="treeDemo" class="ztree"></ul>
      </div>

5、后台是用jsonObject和jsonArray来拼接的数据，示例servlet拼接

else if("search".equals(status)){
   String queryusername=request.getParameter("queryusername").toString();
   String queryaccount=request.getParameter("queryaccount").toString();
   
   ///////////////////////华丽丽的分割线
   JSONArray jsonArrayNode= new JSONArray();
   List list=yhglService.queryUserByKeyword(loginUser.getDw().getDwdm(),queryusername,queryaccount);
   if(list.size()>0){
    Iterator iter=list.iterator();
     while (iter.hasNext()) {
      JSONObject jsonObjectNode = new JSONObject();
      XtYhxx xtyh=(XtYhxx)iter.next();
      jsonObjectNode.put("name", xtyh.getXinm());
      jsonObjectNode.put("yhdm", xtyh.getYhdm());
      //jsonObjectNode.put("url", basePath+"czsf/xtgl/yhgl/YhglServlet?status=query&yhdm="+xtyh.getYhdm());//给节点连接servlet，这样整个页面都会重新载入数据
      jsonObjectNode.put("target", "_self");//表示点击节点连接，只会本页重定位，不会弹出新窗口
      jsonObjectNode.put("click", "true");//给节点添加click事件，那么可实现ajax取树在右侧的数据，不需要整个页面都重新载入数据
      jsonArrayNode.add(jsonObjectNode);
        }
   }
   JSONObject jsonObjectRoot = new JSONObject();
   JSONArray jsonArrayRoot= new JSONArray();
   jsonObjectRoot.put("name", loginUser.getDw().getDwqc());
   jsonObjectRoot.put("children", jsonArrayNode);
   jsonObjectRoot.put("isParent", "true");
   jsonObjectRoot.put("open", "true");//默认根节点展开
   jsonArrayRoot.add(jsonObjectRoot);
   response.getWriter().print(jsonArrayRoot.toString());
   response.getWriter().close();
   
  }

 

6、如果想左侧树ajax取右侧数据

   jsonObjectNode.put("click", "true");//给节点添加click事件，那么可实现ajax取树在右侧的数据，不需要整个页面都重新载入数据

前台也也要相应的在settings中加入，回调函数

var setting = {
     callback: {
    onClick: onClick
      }
     };

 

 function onClick(event, treeId, treeNode, clickFlag) {//在回调函数里用ajax请求数据event
 $.ajax({
   type: "POST",
   url: "<%= basePath%>czsf/xtgl/yhgl/YhglServlet",
   data:  {'status':'query','yhdm':treeNode.yhdm},
   success: function(result){
   var xtyhxx=eval('(' + result + ')')
  $("#username").val(xtyhxx[0].xinm);
  $("#useraccount").val(xtyhxx[0].yhid);
  $("#useraccount").attr("readonly","readonly");
  //不能让其获得焦点，因为会校验的，修改的时候不用改账户，不能让其获得焦点校验
  $("#password").val(xtyhxx[0].yhkl);
  $("#passwordconfirm").val(xtyhxx[0].yhkl);
  $("input[name='sex'][value="+xtyhxx[0].xinb+"]").attr("checked",true);
    $("#whcd").val(xtyhxx[0].whcd);
  if(xtyhxx[0].csrq!=""&&xtyhxx[0].csrq!=null){
    var birthday=xtyhxx[0].csrq.substring(0,4)+'-'+xtyhxx[0].csrq.substring(4,6)+'-'+xtyhxx[0].csrq.substring(6,8);
  }
  $("#birthday").val(birthday);
   $("#sfzh").val(xtyhxx[0].sfzh);
   $("#telephone").val(xtyhxx[0].lxdh);
   $("#paixuhao").val(xtyhxx[0].pxh);
   $("#dept").val(xtyhxx[0].bmmc);
   //应为是ajax取数据，所以要清空checkbox数据
   $('input:checkbox').each(function () {
        $(this).attr('checked',false);
     });
   if(xtyhxx[0].yhjs!=""&&xtyhxx[0].yhjs!=null){
   var arr=xtyhxx[0].yhjs.split(";");
   //设置角色的复选框选中
      $.each(arr, function(key, val){
     $("input[name='yhjs']").each(function () {
           if ($(this).val() ==val) {
               $(this).attr("checked", "checked");
              }
           });
         }) ;
         }
        
      //设置权限信息
     getCheckBoxValue(xtyhxx[1].cbgl,'cbgl');
     getCheckBoxValue(xtyhxx[1].yxdd,'yxdd');
     getCheckBoxValue(xtyhxx[1].zfzs,'zfzs');
     getCheckBoxValue(xtyhxx[1].pjgl,'pjgl');
     getCheckBoxValue(xtyhxx[1].jcsz,'jcsz');
     getCheckBoxValue(xtyhxx[1].xtgl,'xtgl');
      deleId=treeNode.yhdm;
     }
     });
 }

 

7、默认选择第一个节点

   $(document).ready(function(){
 
  // 在这里写你的代码...
  $("#company").val('<%= loginUser.getDw().getDwqc()%>');
  $("#company").attr("disabled","true");
  $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  //默认选择第一个子节点
   var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
      var nodes = treeObj.getNodes();
   if (nodes.length>0)
   {
       //nodes是整个树，nodes[0]是树的第一个根目录下的节点，nodes[0].children[0],是第一个根目录下的第一个子节点
          if(nodes[0].children.length==1){
        onClick(event, 'treeDemo', nodes[0].children[0], "1");
          }
   }
        });