ztree实现树形菜单

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

其具体实现过程呢如下:

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

    <link href="../../ext-res/ztree/css/demo.css" rel="stylesheet">
    <link href="../../ext-res/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">

    <script type="text/javascript" src="../../ext-res/js/jquery.min.js"></script>

    <script type="text/javascript" src="../../ext-res/ztree/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="../../ext-res/ztree/jquery.ztree.excheck.js"></script>

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

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

<div id="treeDemo" class="ztree"></div>

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

然后就是jq与js函数了

<SCRIPT LANGUAGE="JavaScript">
        var zTreeObj;
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
            view: {
                showIcon:false,  //这个是是否显示文件夹和文件的图标
                dblClickExpand : false  //这个是设置是否只能选择一个节点
                //selectedMulti: true  //允许同时选中多个节点。
            },
            data: {
                simpleData: {
                    enable: true //这个是设置数据格式为简单json格式
                }
            },check:{
                enable:true,
                chkboxType:{"Y":"","N":""} //这个是设置选中子节点实话,是否需要选中父节点,以及选中父节点是是否需要选中子节点
            },
            callback: {
                beforeCheck : function(treeId, treeNode) {
                    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                    zTree.checkAllNodes(false);
                    return true;
                },
                onCheck : function(e, treeId, treeNode) {
                    console.log("当前被选择的节点：");
                    console.log(treeNode.id);
                    // alert(treeNode.id);
                }
            }

        };
        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        treeNode:{
        }
        var zNodes = ${folderlist};
        /*var zNodes = [
            {id:10, pId:0, name: "父节点1"},
            {id:11, pId:10, name: "子节点1"},
            {id:12, pId:10, name: "子节点2"},
            {id:13, pId:11, name: "子节点3"}
        ];*/  //这个是样式,也可以从后台返回json格式.
        $(document).ready(function(){
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });

        function savefolder(currentPageId) {
            var zTree1 = $.fn.zTree.getZTreeObj("treeDemo");
            var nodes = zTree1.getCheckedNodes();
            //alert(nodes);
            if(nodes.length==0){
                alert("请选择要保存的文件夹");
            }else{
                alert(currentPageId+"==");
                alert(nodes[0].id);
                //alert($("#deleteHaulId").val());
            }

        }
    </SCRIPT>

这样前端的页面也就写完了,如果想从后台传送数据回来,需要将数据封装到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<PortalFolder> 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";
    }

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