z-tree入门

1.引入z-tree的依赖

<script type="text/javascript" 
        src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"/>
<script type="text/javascript"
        src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"/>
<link rel="stylesheet"  type="text/css"
      href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css"/> 

2.在页面中放置一个ul标签把他的class设置为z-tree

<div title="基本功能" data-options="iconCls:'icon-mini-add'" style="overflow:auto">
     <ul id="treeMenu" class="ztree"></ul>
</div>

3.初始化z-tree

        // 1.初始化ztree菜单的设置
        $(function () {
            // 这个变量用来设置z-tree的属性
            var setting = {
                data: {
                    // 开启简单数据
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    // 点击z-tree节点的回调函数
                    onClick: onClick
                }
            };

            // 2.发送请求基本功能菜单的数据
            $.ajax({
                url: '${pageContext.request.contextPath}/json/menu.json',
                type: 'POST',
                dataType: 'json',
                success: function (data) {
                    // 加载第一棵tree
                    $.fn.zTree.init($("#treeMenu"), setting, data);
                },
                error: function (msg) {
                    alert('菜单加载异常!');
                }
            });
   // 节点点击事件
       function onClick(event, treeId, treeNode, clickFlag) {
			//eventjs event 对象，标准的 js event 对象
			//treeIdString，对应 zTree 的 treeId，便于用户操控
			//treeNodeJSON，被点击的节点 JSON 数据对象
       }