Ztree行政地区树状展示

蔚落 2022-11-21 09:51 136阅读 0赞

# [Ztree行政地区树状展示][Ztree] #

Ztree行政地区树状展示（点击加载） 效果如下：

![39190ca364dcb7fcfea903485bcd2201.png][]

开始贴代码：

实体类 Item，用于对Ztree的节点展示

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>public</code>&nbsp;<code>class</code>&nbsp;<code>Item { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>private</code>&nbsp;<code>String id;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>private</code>&nbsp;<code>String pId;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>private</code>&nbsp;<code>String name;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>private</code>&nbsp;<code>int</code>&nbsp;<code>type;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>private</code>&nbsp;<code>String isParent;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//getters、setters</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

通过业务代码获取加载的对象：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </td> 
 <td> <code>@RequestMapping</code><code>(</code><code>"/province/showProvince"</code><code>)&nbsp;</code> <code>@ResponseBody</code> <code>public</code>&nbsp;<code>List&lt;Item&gt; showProvince(HttpServletRequest request,Model model){&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>List&lt;Province&gt; all = provinceService.getAll();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>List&lt;Item&gt; list =&nbsp;</code><code>new</code>&nbsp;<code>ArrayList&lt;Item&gt;(all.size());</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code><code>(Province p : all){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>Item item =&nbsp;</code><code>new</code>&nbsp;<code>Item();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>item.setId(p.getCode());</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>item.setpId(</code><code>"0"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>item.setName(p.getProvinceName());</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>item.setIsParent(</code><code>"true"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>item.setType(</code><code>0</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>list.add(item);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>list;&nbsp;</code> <code>&nbsp;&nbsp;</code><code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

关键看页面的脚本和实现：

页面代码：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 </td> 
 <td> <code>&lt;!DOCTYPE html PUBLIC&nbsp;</code><code>"-//W3C//DTD XHTML 1.0 Transitional//EN"</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</code><code>&gt;</code> <code>&lt;html xmlns=</code><code>"http://www.w3.org/1999/xhtml"</code><code>&gt;</code> <code>&lt;head&gt;</code> <code>&lt;meta http-equiv=</code><code>"Content-Type"</code>&nbsp;<code>content=</code><code>"text/html; charset=utf-8"</code>&nbsp;<code>/&gt;</code> <code>&lt;title&gt;Insert title here&lt;/title&gt;</code> <code>&lt;link rel=</code><code>"stylesheet"</code>&nbsp;<code>href=</code><code>"css/demo.css"</code>&nbsp;<code>type=</code><code>"text/css"</code>&nbsp;<code>/&gt;</code> <code>&lt;link rel=</code><code>"stylesheet"</code>&nbsp;<code>href=</code><code>"css/zTreeStyle/zTreeStyle.css"</code>&nbsp;<code>type=</code><code>"text/css"</code>&nbsp;<code>/&gt;</code> <code>&lt;script type=</code><code>"text/javascript"</code>&nbsp;<code>src=</code><code>"js/jquery-1.4.4.min.js"</code><code>&gt;&lt;/script&gt;</code> <code>&lt;script type=</code><code>"text/javascript"</code>&nbsp;<code>src=</code><code>"js/menu.js"</code><code>&gt;&lt;/script&gt;</code> <code>&lt;script type=</code><code>"text/javascript"</code>&nbsp;<code>src=</code><code>"js/jquery.ztree.core-3.5.js"</code><code>&gt;&lt;/script&gt;</code> &nbsp; <code>&lt;/head&gt;</code> <code>&lt;body&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&nbsp;</code><code>class</code><code>=</code><code>"zTreeDemoBackground left"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;ul id=</code><code>"tree"</code>&nbsp;<code>class</code><code>=</code><code>"ztree"</code><code>&gt;&lt;/ul&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/div&gt;</code> <code>&lt;/body&gt;</code> <code>&lt;/html&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

menu.js

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 </td> 
 <td> <code>var menu = { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>setting : { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data : { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>simpleData : { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>enable :&nbsp;</code><code>true</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>keep : { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>parent :&nbsp;</code><code>true</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>/*</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>* view : { dblClickExpand : false },</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*/</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>callback : {&nbsp;</code><code>// 回调函数</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>onExpand : addNode,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>onClick : addNode</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>loadMenuTree : function() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$.post(</code><code>"province/showProvince.do"</code><code>,&nbsp;</code><code>null</code><code>, function(data) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$.fn.zTree.init($(</code><code>"#tree"</code><code>), menu.setting, data);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>};</code> <code>$().ready(function() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>menu.loadMenuTree();</code> <code>});</code> &nbsp; <code>function addNode(event, treeId, treeNode, clickFlag) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var zTree = $.fn.zTree.getZTreeObj(</code><code>"tree"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(treeNode.isParent &amp;&amp; typeof (treeNode.children) ==&nbsp;</code><code>"undefined"</code><code>) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var type = treeNode.type;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var parameter = { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>pId : treeNode.id</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(type ==&nbsp;</code><code>0</code><code>) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$.post(</code><code>"city/showCity.do"</code><code>, parameter, function(data) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>zTree.addNodes(treeNode, data);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(type ==&nbsp;</code><code>1</code><code>) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$.post(</code><code>"county/showCounty.do"</code><code>, parameter, function(data) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>zTree.addNodes(treeNode, data);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

其中onExpand : addNode,  onClick : addNode 两个回调函数，分别是在点击折叠按钮和节点时，异步加载子节点的内容，onDblClick添加回调函数时，发现会触发onExpand 事件，是因为zTree双击时触发onExpand事件,所以在setting中设置 view : \{ dblClickExpand : false \} 可关闭这个默认设置。

最后，提供一个zTree的在线api: http://www.treejs.cn/v3/api.php

[Ztree]: https://www.cnblogs.com/gzy-blog/p/6047012.html
[39190ca364dcb7fcfea903485bcd2201.png]: /images/20221120/9b2474fb4aa245cd9d6a8fa1260c1a77.png