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"])
- 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
将生成的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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
行政区划树状图使用zTree的渲染效果如下:
- 北京市
- 天津市
- 河北省
- 山西省
- 内蒙古自治区
- 辽宁省
- 吉林省
- 黑龙江省
- 上海市
- 江苏省
- 浙江省
- 安徽省
- 福建省
- 江西省
- 山东省
- 河南省
- 湖北省
- 湖南省
- 广东省
- 广西壮族自治区
- 海南省
- 重庆市
- 四川省
- 贵州省
- 云南省
- 西藏自治区
- 陕西省
- 甘肃省
- 青海省
- 宁夏回族自治区
- 新疆维吾尔自治区
- 台湾省
- 香港特别行政区
- 澳门特别行政区
本文链接:http://bookshadow.com/weblog/2014/08/25/administrative-division-tree-chart-by-ztree/
请尊重作者的劳动成果,转载请注明出处!书影博客保留对文章的所有权利。
挺不错的,支持一下,以后会经常关注该博客,同时欢迎回访!