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

最新推荐文章于 2022-05-31 14:56:59 发布

ryan1214

最新推荐文章于 2022-05-31 14:56:59 发布

阅读量868

点赞数

CC 4.0 BY-SA版权

分类专栏：前台js

本文链接：https://blog.youkuaiyun.com/ryan1214/article/details/28230689

前台js 专栏收录该内容

15 篇文章

订阅专栏

关于ztree基本使用

1、JSP导入css和js包

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标签

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
      }
     };

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");
          }
   }
        });