* 文件準備 ~~~ <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery.ztree.core-3.x.js"></script> ~~~ * 編寫 html 頁面（本地數據） ~~~ <script> var zTreeObj; // zTree 的參數配置，深入使用請參考 API 文檔（setting 配置詳解） var setting = {}; // zTree 的數據屬性，深入使用請參考 API 文檔（zTreeNode 節點數據詳解） var zNodes = [ {name:"test1", open:true, children:[ {name:"test1_1"}, {name:"test1_2"}]}, {name:"test2", open:true, children:[ {name:"test2_1"}, {name:"test2_2"}]} ]; $(document).ready(function(){ zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); </script> ~~~ * 編寫 html 頁面（服務端數據） ~~~ $(document).ready(function(){ /** * 加載樹形授權菜單 */ var _id = $("#group_id").val(); var tree = $("#tree"); var zTree; // zTree 配置項 var setting = { check: { enable: true }, view: { dblClickExpand: false, showLine: true, showIcon: false, selectedMulti: false }, data: { simpleData: { enable: true, idKey: "id", pIdKey: "pid", rootpid: "" }, key: { name: "title" } } }; $.ajax({ url: "/index.php/admin/auth_group/getJson", type: "post", dataType: "json", cache: false, data: { id: _id }, success: function (data) { zTree = $.fn.zTree.init(tree, setting, data); } }); ~~~