ztree实现树形菜单

实现后的结果大致是这样的

其具体实现过程呢如下:

首先需要引入几个js和css样式:

需要注意的是,jquery.min.js需要引在另外两个js文件前面.

然后就可以操作了,具体代码首先是前端页面

需要注意的是class="ztree"这个不能改,

然后就是jq与js函数了

这样前端的页面也就写完了,如果想从后台传送数据回来,需要将数据封装到json格式中

第一种是直接创建一个类,因为返回前端的格式是{id:10,pId:0,name:"父节点1"},这样的话需要类的字段与之一一对应,还有就是在json封装的时候,改一下.

public class PortalFolder {
    //当前pageId
    private String id;
    //父类pageId
    private String pId;
    //名称
    private String name;
    //设置状态为true
    private boolean open = true;

    public boolean isOpen() {
        return open;
    }

    public void setOpen(boolean open) {
        this.open = open;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getpId() {
        return pId;
    }

    public void setpId(String pId) {
        this.pId = pId;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

@RequestMapping(value = "/currentFolderList.action")
    public String currentFolderList(String currentpageId, ModelMap model) {
        //获取所有的节点列表
        List folders = portalService.getFolderList();
        //封装成json格式,我引入的是import net.sf.json.JSONArray;
        JSONArray jsonArray = JSONArray.fromObject(folders);
        //将json转成字符串
        String json = jsonArray.toString();
        //如果查出来的类字段不对应,可以通过这个改
        //json = json.replaceAll("menuId","id").replaceAll("parentId","pId").
                //replaceAll("menuName","name").replaceAll("hasSubMenu","checked");
        //System.out.println(json);
        //设置json属性    
        model.addAttribute("portalList", portalList);
        return "portal/PortalShowPageList";
    }

这样就可以实现树形菜单了，希望对你有帮助。喜欢的朋友可以关注我微信的公众号：从小白到架构师。我会每天更新学习内容的。