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 數據對象
       }