使用zTree绘制行政区划树状图

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/
请尊重作者的劳动成果,转载请注明出处!书影博客保留对文章的所有权利。

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

Pingbacks已关闭。

评论
  1. 健康减肥博客 健康减肥博客 发布于 2014年8月29日 08:56 #

    挺不错的,支持一下,以后会经常关注该博客,同时欢迎回访!

张贴您的评论