Ztree 树形菜单前后台演示_ztree演示-优快云博客

本文链接：https://blog.youkuaiyun.com/HL_smile90/article/details/53184936

本文展示了如何使用Java后端和JSP前端实现Ztree树形菜单的数据获取与点击事件处理。通过两种不同的数据组织方式，创建并返回包含父节点和子节点的JSON数据，前端利用AJAX获取数据并初始化Ztree，同时定义了onClick回调函数进行接口调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种写法：【Java 代码】

public String getAllInfo() {
       //获取所有父节点
       JSONArray array = new JSONArray();
       JSONObject jstr = new JSONObject();
       List <Mock_SiteInfo> parentNodes = MockSiteInfoMapper.getAllInfo();
       for(int i=0;i<parentNodes.size();i++){
           JSONArray jsonArray = new JSONArray();
           List<Mock_Interface> list = mockInterfaceMapper.selectByparentId(parentNodes.get(i).getId()) ;
            jstr.put("name", parentNodes.get(i).getDomain());
            jstr.put("isParent", true);
           if(list!=null && list.size()>0){
               JSONObject obj = new JSONObject();
               for(int j=0;j<list.size();j++){
                   obj.put("name", list.get(j).getUri());
                   jsonArray.add(obj);
               }
           }
           jstr.put("children",jsonArray);
           System.out.println(">>>>>>>>>>>>>>>>jstr"+jstr);
           array.add(jstr);
       }
       System.out.println(">>>>>>>>>>>>>>JSONZTREE...."+array);
       return array.toString();

前端jsp页面:

var setting = {
        data: {
         simpleData: {
            enable: true }
          },
          callback: { //beforeClick: beforeClick,
          onClick: onClick }
          };

function onClick(event, treeId, treeNode, clickFlag) {
           $.ajax({
                async:true,
                type:'POST',
                data: {"uri": treeNode.name},
                url:'showInterfaceIndex.do',
                success:function(data){

//这里是你的处理逻辑

            },error:function(){
                    alert("请求失败");
                }
            });

var zNodes;
         $(function(){
            $.ajax({
                async:false,
                cache:false,
                type:'POST',
                //dataType:"String",
                url:'getTreeNodes.do',
                success:function(data){
                    zNodes = data;
                },error:function(){
                    alert("请求失败");
                }
            });
        });
            $(document).ready(function(){
            treeNodes = eval("(" + zNodes + ")"); //将string类型转换成json
            $.fn.zTree.init($("#treeDemo"), setting, treeNodes);
           });

第二种写法：

//获取所有父节点
       JSONArray array = new JSONArray();
       JSONObject jstr = new JSONObject();
       List <Mock_SiteInfo> parentNodes = MockSiteInfoMapper.getAllInfo();
       for(int i=0;i<parentNodes.size();i++){
           jstr.put("id", parentNodes.get(i).getId());
           jstr.put("pId",0);
            jstr.put("name", parentNodes.get(i).getDomain());
            jstr.put("isParent", true);
            array.add(jstr);
            List<Mock_Interface> list = mockInterfaceMapper.selectByparentId(parentNodes.get(i).getId()) ;
           if(list!=null && list.size()>0){
               JSONObject obj = new JSONObject();
               for(int j=0;j<list.size();j++){
                   int id = parentNodes.get(i).getId()+j+list.get(j).getId();
                   obj.put("id", id);
                   obj.put("pId", parentNodes.get(i).getId());
                   obj.put("name",list.get(j).getUri());
                   array.add(obj);
               }
           }
       }
       System.out.println(">>>>>>>>>>>>>>JSONZTREE...."+array);
       return array.toString();

前端jsp页面：

var setting = {
        data: {
         simpleData: {
            enable: true ,
            idKey: "id",
           pIdKey: "pId",
           rootPId: 0 }
          },
          callback: { //beforeClick: beforeClick,
          onClick: onClick }
          };