* 文件准备 ~~~ <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); } }); ~~~