Ztree菜单与ajax

最新推荐文章于 2024-09-08 13:51:16 发布

好哥哥1998

最新推荐文章于 2024-09-08 13:51:16 发布

阅读量841

点赞数

文章标签： jquery jsp

本文链接：https://blog.csdn.net/qq_42640205/article/details/109498863

版权

Ztree是一个基于jQuery的多功能树形插件，适用于创建树状菜单、数据展示和权限管理等场景。使用Ztree需要先引入jQuery库。本文介绍了Ztree的引入步骤，包括在项目中引入Ztree，将数据包引入页面，定义树的显示区域，后台将数据打包成JSON格式供菜单使用，以及前端控制器的设置和最终页面效果展示。

摘要由CSDN通过智能技术生成

什么是Ztree？

zTree 是一个依靠 jQuery 实现的多功能 “树插件”，需要先导入jquery才能导入zTree。

有什么用？

树状菜单
树状数据显示
权限管理

怎么用

引入Ztree到项目中

在这里插入图片描述

将数据包引入页面

  <link rel="stylesheet" type="text/css" href="${path}/plugins/ztree/css/zTreeStyle/zTreeStyle.css">
    <script type="text/javascript" src="${path}/plugins/ztree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="${path}/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>

定义树显示区域

    <SCRIPT type="text/javascript">

        var setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        var zNodes =[
            { id:1, pId:0, name:"Sass管理", open:true},
            { id:11, pId:1, name:"企业管理", open:true,checked:true},
            { id:111, pId:1, name:"模块管理"}
        ];

        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            //参1 显示的标签
            //参2 设置的参数 比如支持复选 check enable = true
            //参3 数据

        });

    </SCRIPT>

后台数据打包成json传给菜单

 public class TestZtreeJsonData {
  @Test
public void test01() throws JsonProcessingException {
   
  List<Map<String,Object>> list=new ArrayList<>();
  Map<String,Object> node1=new HashMap<String,Object>();
  node1.put("id",1);
  node1.put("pId",0);
  node1.put("name","Sass管理");
  node1.put("open",true);

  Map<String,Object> node2=new HashMap<String,Object>();
  node2.put("id",11);
  node2.put("pId",1);
  node2.put("name","企业管理");
  node2.put("open",true);
  node2.put("checked",true);

  Map<String,Object> node3=new HashMap<String,Object>();
  node3.put("id",111);
  node3.put("pId",1);
  node3.put("name","模块管理");

  //因为三个元素放在[]中，所以本质上放到集合中的
  list.add(node1);
  list.add(node2);
  list.add(node3);

  String json = new ObjectMapper().writeValueAsString(list);
  System.out.println(json);
}
}

前端控制器

@Controller
@RequestMapping("/test")
public class TestZtreeDataController extends BaseController {

    @RequestMapping(path="/getZtreeData",method ={ RequestMethod.GET, RequestMethod.POST})
    public @ResponseBody
    Object getZtreeData(){
        List<Map<String,Object>> list=new ArrayList<>();
        Map<String,Object> node1=new HashMap<String,Object>();
        node1.put("id",1);
        node1.put("pId",0);
        node1.put("name","Sass管理");
        node1.put("open",true);

        Map<String,Object> node2=new HashMap<String,Object>();
        node2.put("id",11);
        node2.put("pId",1);
        node2.put("name","企业管理");
        node2.put("open",true);
        node2.put("checked",true);

        Map<String,Object> node3=new HashMap<String,Object>();
        node3.put("id",111);
        node3.put("pId",1);
        node3.put("name","模块管理");

        //因为三个元素放在[]中，所以本质上放到集合中的
        list.add(node1);
        list.add(node2);
        list.add(node3);
        return list; //list虽然是对象，但会被 @ResponseBody转成json
    }
}

页面效果

在这里插入图片描述