zTree是一款基于jQuery的js树形插件，可以将树形结构的数据以可折叠的树状图的形式进行展现，该组件的Github项目地址为：https://github.com/zTree/zTree_v3。

本文以行政区划树状图为例，简述zTree插件的使用过程。

访问国家民政部网站的URL：http://www.mca.gov.cn/article/sj/tjbz/a/2016/201605/20160506281034.html，可以查看2016年5月中华人民共和国县以上行政区划代码。

访问国家统计局网站的URL：http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201504/t20150415_712722.html，即可浏览最新县及县以上行政区划代码（截止2014年10月31日）。

将页面上的行政区划正文复制并保存在一个文本文件中，命名为xzqh.txt，使用文本编辑器（例如Notepad++）移除文本中的多余空行，并对内容进行校验和修改，参考：https://github.com/qinjiannet/ztree-xzqh.js/blob/master/xzqh.txt。

使用下面的Python代码将行政区划文本转换为以“孩子表示法”存储的树形结构，并使用json进行序列化，Python代码如下：

#encoding=utf-8
import json

#树的后根遍历
def traverse(node, func):
    if node and node['children']:
        for child in node['children']:
            traverse(child, func)
    func(node)

#清除节点的多余属性，树使用孩子表示法进行表示
def clearNode(node):
    if node:
        del node['parent']
        del node['depth']
        if not node['children']:
            del node['children']

root = {'code':'','name':'中国','children':[],'parent':None,'depth':None}
curNode = root
curDepth = 0
f = open('./xzqh.txt','r')
for line in f:
    code, name = line.split()
    depth = 1 if code.endswith('0000') else 2 if code.endswith('00') else 3
    node = {'code':code,'name':name,'children':[],'parent':None,'depth':depth}
    if depth > curDepth and curNode['code'][:curDepth*2] == code[:curDepth*2]:
        node['parent'] = curNode
        curNode['children'].append(node)
    else :
        while depth < curDepth and curNode['parent'] and \
            curNode['parent']['code'][:curDepth*2] != curNode['code'][:curDepth*2]:
            curNode = curNode['parent']
            curDepth = curNode['depth']
        if curNode['parent']:
            node['parent'] = curNode['parent']
            curNode['parent']['children'].append(node)
    curNode = node
    curDepth = depth

traverse(root, clearNode)
print json.dumps(root["children"])

将生成的json字符串赋值给名称为zNodes的变量，保存在xzqh.js中

可以从这里获取xzqh.js文件：https://github.com/qinjiannet/ztree-xzqh.js/blob/master/xzqh.js

使用下面的代码通过zTree插件进行渲染：

<link rel="stylesheet" href="/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="/js/xzqh.js"></script>
<SCRIPT type="text/javascript">
  var setting = { 
    data : { 
      key : { title : "code"}
    }
  };
    $(document).ready(function(){
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  });
</SCRIPT>

<ul id="treeDemo" class="ztree"></ul>

行政区划树状图使用zTree的渲染效果如下：

本文链接：http://bookshadow.com/weblog/2014/08/25/administrative-division-tree-chart-by-ztree/
请尊重作者的劳动成果，转载请注明出处！书影博客保留对文章的所有权利。

如果您喜欢这篇博文，欢迎您捐赠书影博客： ，查看支付宝二维码