使用ZTree树创建树形菜单

1. 引入ztree需要的css和js以及jquery

<link rel="stylesheet" href="plugs/ZTree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="plugs/ZTree/jquery.ztree.all.min.js"></script>

1. 指定ztree相关设置

//ztree树设置
var zTreeObj;
var setting = {
    check:{
        chkboxType : { "Y" : "ps", "N" : "ps" },    //关联父子关系
        enable:true     //显示复选框
        } ,
    //数据  
    data : {  
        simpleData : {  
            enable : true  ,
            idKey: "id", //菜单id
            pIdKey: "fatId", //父类菜单id
            rootPId: 0
        }  
    }  
};

1. 构建ztree数据

// zTree 的数据
var zNodes = [ {
    id : "001" ,
    pId : "" ,
    name : "test1",
    open : true,
    children : [ {
        id : "00101" ,
        pId : "001" ,
        name : "test1_1"
    }, {
        id : "00102" ,
        pId : "001" ,
        name : "test1_2"
    } ]
}, {
    id : "002" ,
    pId : "" ,
    name : "test2",
    open : true,
    children : [ {
        id : "00201" ,
        pId : "002" ,
        name : "test2_1"
    }, {
        id : "00202" ,
        pId : "002" ,
        name : "test2_2"
    } ]
} ];

1. 构建ztree树

//生成ztree树
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
//显示弹出层
//$('#myModal').modal('show');

1. 获取选中的树节点

var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes2 = treeObj.getCheckedNodes(true);
//遍历节点
$.each(nodes2,function(i,val){
    alert(val.id + "======"+ val.name);
});

说明

• treeDemo 是树容器id