简介：
无限极分类是一种比较常见的数据格式，生成组织结构，生成商品分类信息，权限管理当中的细节权限设置，都离不开无限极分类的管理。
常见的有链表式，即有一个Pid指向上级的ID，以此来设置结构。写的时候简单，用的时候效果一班，比如说，同一级没有办法手动重新排序，查询所有子孙的时候不方便。
所以有了预排序树，即左右值树形管理。
优点还是挺多的。
可以快速确定关系，最短路径，同级排序，查找所有子孙（最好的地方）
一：主要包
-
sqlalchemy_mptt
- https://github.com/uralbash/sqlalchemy_mptt
- pip install sqlalchemy_mptt
-
sqlalchemy-orm-tree
- https://github.com/monetizeio/sqlalchemy-orm-tree/
- pip install sqlalchemy-orm-tree
- 最后更新2015年8月27日，还没有完整的示例代码，仅有的几行，还………………
- 放弃
-
ztree
- http://www.treejs.cn/
- 这个是前台JS显示用的，希望我能整合到flask-admin中去。
二：sqlalchemy_mptt
1.快速指南
源码：
# !/usr/bin/python3
# -*- coding: utf-8 -*-
# @Time : 2018-09-12 16:32
# @Author : Jackadam
# @Email :jackadam@sina.com
# @File : mptt.py
# @Software: PyCharm
from sqlalchemy import create_engine
from sqlalchemy.orm import scoped_session, sessionmaker
from sqlalchemy_mptt import mptt_sessionmaker
from sqlalchemy import Column, Integer, String
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy_mptt.mixins import BaseNestedSets Base = declarative_base() class Tree(Base, BaseNestedSets):
__tablename__ = "tree"
id = Column(Integer, primary_key=True)
name = Column(String(8)) def __repr__(self):
return "<Node (%s)>" % self.id engine = create_engine('sqlite:///mptt.db', echo=False)
mptt_ession = mptt_sessionmaker(sessionmaker(bind=engine))
db_session = scoped_session(sessionmaker(autocommit=False,
autoflush=False,
bind=engine)) def print_tree(group_name, tab=1):
"""
:param str group_name:要查找的树的根的名称
:param int tab: 格式化用的-数量
"""
group = db_session.query(Tree).filter_by(name=group_name).one_or_none() # type: TreeGroup
if not group:
return
# group found - print name and find children
print('- ' * tab + group.name)
for child_group in group.children: # type: TreeGroup
# new tabulation value for child record
print_tree(child_group.name, tab * 2) if __name__ == '__main__':
# Base.metadata.create_all(bind=engine)
# nodes=[]
# node=Tree(name='中国')
# nodes.append(node)
# db_session.add_all(nodes)
# db_session.commit()
# nodes = []
# ref_id=db_session.query(Tree.id).filter_by(name='中国').first()[0]
# print(ref_id)
# new_name=['河南','河北','山东','山西','陕西']
# for i in new_name:
# print(i)
# node=Tree(name=i,parent_id=ref_id)
# nodes.append(node)
# db_session.add_all(nodes)
# db_session.commit()
# nodes = []
# ref_id = db_session.query(Tree.id).filter_by(name='河南').first()[0]
# print(ref_id)
# new_name = ['郑州', '洛阳', '开封', '新乡', '新郑']
# for i in new_name:
# print(i)
# node = Tree(name=i, parent_id=ref_id)
# nodes.append(node)
# db_session.add_all(nodes)
# db_session.commit()
print_tree('中国')
print_tree('河南')
2.结果样式：
print_tree('中国')
- 中国
- - 河南
- - - - 郑州
- - - - 洛阳
- - - - 开封
- - - - 新乡
- - - - 新郑
- - 河北
- - 山东
- - 山西
- - 陕西
print_tree('河南')
- 河南
- - 郑州
- - 洛阳
- - 开封
- - 新乡
- - 新郑
3.优势
我加入的顺序可不是这个顺序，但是数据结构，和sqlalchemy_mptt帮我们处理了层级数据结构，就显示为树形结构了。
再试试下面的代码，可以列出所有的数。
def print_all_tree(tab=1):
"""
:param int tab: 格式化用的-数量
"""
group = db_session.query(Tree).filter_by(parent_id=None).all() # type: TreeGroup
print(group)
if not group:
return
# group found - print name and find children
for i in group:
print('- ' * tab + i.name)
for child_group in i.children: # type: TreeGroup
# new tabulation value for child record
print_tree(child_group.name, tab * 2)
# nodes=[]
# new_name = ['美国', '英国', '法国', '英国', '德国']
# for i in new_name:
# print(i)
# node = Tree(name=i)
# nodes.append(node)
# db_session.add_all(nodes)
# db_session.commit()
# ref_id = db_session.query(Tree.id).filter_by(name='美国').first()[0]
# nodes = []
# new_name = ['亚拉巴马', '阿拉斯加', '亚利桑那', '阿肯色', '加利福尼亚']
# for i in new_name:
# print(i)
# node = Tree(name=i,parent_id=ref_id)
# nodes.append(node)
# db_session.add_all(nodes)
# db_session.commit()
print_all_tree(1)
三：数据结构分析
数据库结构
数据库里面的内容为
映射定义结构
分析：
我们只定义了主键id，name名字。但是数据库里面多了几列：lft，rgt，level，tree_id，parent_id
这些结构就是左右值树用的东西，参照最上面的图，每个名字都有左值和右值，可以很方便的查到结构。
比如说：
找到所有的子孙：查找Food的子孙，Food作为参考点，左值为1，右值为18，所有的子孙，就是数据库中左值大于1，小于18的。
查找Fruit的子孙，Fruit作为参考点，左值为2，右值为11，所有的子孙，就是数据库中左值大于2，小于11的。
找到所有的子节点（不包括孙节点）：查找Food的子节点，Food作为参考点，level=1，tree_id=1。
那么所有的子节点为 tree_id=1,level=1+1 层级为2的。
查找最短路径：一般用在导航中，也有用在组合显示上，因为需要知道上一级，上N级的路径结构：
查找Banana的上级路径，Banana作为参考点，左值为8，右值为9，那么路径就是数据库中左值小于8，并且右值大于9的。排序按左值或右值的升序降序，就随便你了。
结果是 Food--Fruit--Yellow--Banana
四：算法
1.简介:
关于预排序树的算法，有很多，我也写不好，所以我用了sqlalchemy_mptt,还是大概介绍一下吧。
2.增加
按sqlalchemy_mptt的用法，
如果没有parent_id，那么就创建为一个新树的根节点，parent_id是空的，level是1，tree_id根据数据库的情况顺序向上加。
如果有提供parent_id,那么久创建为parent的子节点，parent_id是提供的，level是parent的level+1，tree_id和parent一致。
同时要更新受影响的其他节点。
左值处理一遍。
大于parent_id右值的所有左值，+2
右值处理一遍。
大于等于parent_id右值的所有右值，+2
3.删除
和增加差不多，删除一个节点以后，也要更新受影响的左值和右值。
4.移动
这个其实就是删除一个老节点，再创建一个新节点。
5.完全不用担心
因为这些功能，sqlalchem_mptt全都实现了，根本不需要你操心。具体怎么用，我还在学习中。
下面的东西，随着我的学习，逐步更新。
五：ztree
1.ztree基础显示（带编辑功能）
下面的代码，保存为html，直接就可以了。
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - beforeEditName / beforeRemove / onRemove / beforeRename / onRename</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
<SCRIPT type="text/javascript">
<!--
var setting = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
edit: {
enable: true,
editNameSelectAll: true,
showRemoveBtn: showRemoveBtn,
showRenameBtn: showRenameBtn
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeDrag: beforeDrag,
beforeEditName: beforeEditName,
beforeRemove: beforeRemove,
beforeRename: beforeRename,
onRemove: onRemove,
onRename: onRename
}
}; var zNodes = [
{id: 1, pId: 0, name: "父节点 1", open: true},
{id: 11, pId: 1, name: "叶子节点 1-1"},
{id: 12, pId: 1, name: "叶子节点 1-2"},
{id: 13, pId: 1, name: "叶子节点 1-3"},
{id: 2, pId: 0, name: "父节点 2", open: true},
{id: 21, pId: 2, name: "叶子节点 2-1"},
{id: 22, pId: 2, name: "叶子节点 2-2"},
{id: 23, pId: 2, name: "叶子节点 2-3"},
{id: 3, pId: 0, name: "父节点 3", open: true},
{id: 31, pId: 3, name: "叶子节点 3-1"},
{id: 32, pId: 3, name: "叶子节点 3-2"},
{id: 33, pId: 3, name: "叶子节点 3-3"}
];
var log, className = "dark"; function beforeDrag(treeId, treeNodes) {
return false;
} function beforeEditName(treeId, treeNode) {
className = (className === "dark" ? "" : "dark");
showLog("[ " + getTime() + " beforeEditName ] " + treeNode.name);
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
setTimeout(function () {
if (confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？")) {
setTimeout(function () {
zTree.editName(treeNode);
}, 0);
}
}, 0);
return false;
} function beforeRemove(treeId, treeNode) {
className = (className === "dark" ? "" : "dark");
showLog("[ " + getTime() + " beforeRemove ] " + treeNode.name);
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
} function onRemove(e, treeId, treeNode) {
showLog("[ " + getTime() + " onRemove ] " + treeNode.name);
} function beforeRename(treeId, treeNode, newName, isCancel) {
className = (className === "dark" ? "" : "dark");
showLog((isCancel ? "<span style='color:red'>" : "") + "[ " + getTime() + " beforeRename ] " + treeNode.name + (isCancel ? "</span>" : ""));
if (newName.length == 0) {
setTimeout(function () {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.cancelEditName();
alert("节点名称不能为空.");
}, 0);
return false;
}
return true;
} function onRename(e, treeId, treeNode, isCancel) {
showLog((isCancel ? "<span style='color:red'>" : "") + "[ " + getTime() + " onRename ] " + treeNode.name + (isCancel ? "</span>" : ""));
} function showRemoveBtn(treeId, treeNode) {
return !treeNode.isFirstNode;
} function showRenameBtn(treeId, treeNode) {
return !treeNode.isLastNode;
} function showLog(str) {
if (!log) log = $("#log");
log.append("<li class='" + className + "'>" + str + "</li>");
if (log.children("li").length > 8) {
log.get(0).removeChild(log.children("li")[0]);
}
} function getTime() {
var now = new Date(),
h = now.getHours(),
m = now.getMinutes(),
s = now.getSeconds(),
ms = now.getMilliseconds();
return (h + ":" + m + ":" + s + " " + ms);
} var newCount = 1; function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='add node' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_" + treeNode.tId);
if (btn) btn.bind("click", function () {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.addNodes(treeNode, {id: (100 + newCount), pId: treeNode.id, name: "new node" + (newCount++)});
return false;
});
}; function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.tId).unbind().remove();
}; function selectAll() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.setting.edit.editNameSelectAll = $("#selectAll").attr("checked");
} $(document).ready(function () {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
$("#selectAll").bind("click", selectAll);
});
//-->
</SCRIPT>
<style type="text/css">
.ztree li span.button.add {
margin-left: 2px;
margin-right: -1px;
background-position: -144px 0;
vertical-align: top;
*vertical-align: middle
}
</style>
</HEAD> <BODY> <ul id="treeDemo" class="ztree"></ul> </BODY>
</HTML>
其中head引入了jquery，ztree的一些JS文件。
然后var setting，设置了ztree的一些参数
var zNodes，设置了一个简单结构的数结构数据。
一些function，定义了鼠标移上去，移出去，点击……的一些事件。
<style type="text/css">
.ztree li span.button.add { 这个样式，定义了添加按钮的图标。
在body中
直接 <ul id="treeDemo" class="ztree"></ul>就可以显示了
2.在flask中显示
把整页作为模板，动态传入zNodes，就可以直接显示了。
3.在flask-admin中显示
因为我这个懒蛋，准备把flask-admin当前台用。数据展示也挺方便。
先写一个页面，单独只显示ztree
视图函数：
用extra_css引入自定义css（ztree的）
用extra_js引入自定义js（ztree的）
用@expose('/')定义路由URL(flask-admin的)
tree_info,是读取数据库拿到的树的基本信息。
class User_Groups_ModelView(ModelView):
extra_css=[
"../static/zTree_v3/css/demo.css",
"../static/zTree_v3/css/zTreeStyle/zTreeStyle.css"
]
extra_js = [
"../static/zTree_v3/js/jquery.ztree.all.js",
"../static/zTree_v3/js/jquery.ztree.core.js",
"../static/zTree_v3/js/jquery.ztree.excheck.js",
"../static/zTree_v3/js/jquery.ztree.exedit.js",
"../static/zTree_v3/js/jquery.ztree.exhide.js",
# "../static/zTree_v3/js/jquery-1.4.4.min.js",
]
page_size = 20 # the number of entries to display on the list view
can_create = False
# can_edit = True
# can_delete = False
# can_view_details = True
@expose('/')
def index(self):
tree_info=get_simple_json()
return self.render('users/list.html',tree_info=tree_info)
get_simple_json就是按ztree的简单结构，生成树的基本数据。带到模板去渲染
def get_simple_json():
groups = db_session.query(User_Groups).all()
# print(len(groups))
result = []
for i in groups:
if i.parent_id == None:
i.parent_id = 0
_dict = {
'id': i.id,
'pId': i.parent_id,
'name': i.groups_name,
}
result.append(_dict)
# print(result)
return result
模板文件
前面引入了flask-admin的基本模板
block body（显示主体）
block model_menu_bar(菜单导航，就是新建--删除--导出那一行)
<script></script>中间，写了ztree的一些方法，用来动态的显示出添加，编辑，删除的小按钮。
<ul id="treeDemo" class="ztree"></ul>
这个就是显示了。
block tail
ztree的渲染，我把它写在了尾部
{% extends 'admin/master.html' %}
{% import 'admin/lib.html' as lib with context %}
{% import 'admin/actions.html' as actionslib with context %}
{% block body %}
{% block model_menu_bar %}
<ul class="nav nav-tabs actions-nav">
<li class="active">
<a href="javascript:void(0)">{{ _gettext('List') }}{% if count %} ({{ count }}){% endif %}</a>
</li>
{% if admin_view.can_create %}
<li>
{%- if admin_view.create_modal -%}
{{ lib.add_modal_button(url=get_url('.create_view', url=return_url, modal=True), title=_gettext('Create New Record'), content=_gettext('Create')) }}
{% else %}
<a href="{{ get_url('.create_view', url=return_url) }}"
title="{{ _gettext('Create New Record') }}">{{ _gettext('Create') }}</a>
{%- endif -%}
</li>
{% endif %}
{% if admin_view.can_export %}
{{ model_layout.export_options() }}
{% endif %}
{% block model_menu_bar_before_filters %}{% endblock %}
{% if filters %}
<li class="dropdown">
{{ model_layout.filter_options() }}
</li>
{% endif %}
{% if can_set_page_size %}
<li class="dropdown">
{{ model_layout.page_size_form(page_size_url) }}
</li>
{% endif %}
{% if actions %}
<li class="dropdown">
{{ actionlib.dropdown(actions) }}
</li>
{% endif %}
{% if search_supported %}
<li>
{{ model_layout.search_form() }}
</li>
{% endif %}
{% block model_menu_bar_after_filters %}{% endblock %}
</ul>
{% endblock %}
<SCRIPT type="text/javascript">
<!--
var setting = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
edit: {
enable: true,
editNameSelectAll: true,
showRemoveBtn: showRemoveBtn,
showRenameBtn: showRenameBtn
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeDrag: beforeDrag,
beforeEditName: beforeEditName,
beforeRemove: beforeRemove,
beforeRename: beforeRename,
onRemove: onRemove,
onRename: onRename
}
};
var zNodes = {{ tree_info|safe }};
var log, className = "dark";
function beforeDrag(treeId, treeNodes) {
alert('这里是增加？')
return false;
}
function beforeEditName(treeId, treeNode) {
className = (className === "dark" ? "" : "dark");
showLog("[ " + getTime() + " beforeEditName ] " + treeNode.name);
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
setTimeout(function () {
if (confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？")) {
setTimeout(function () {
zTree.editName(treeNode);
}, 0);
}
}, 0);
return false;
}
function beforeRemove(treeId, treeNode) {
className = (className === "dark" ? "" : "dark");
showLog("[ " + getTime() + " beforeRemove ] " + treeNode.name);
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
}
function onRemove(e, treeId, treeNode) {
showLog("[ " + getTime() + " onRemove ] " + treeNode.name);
}
function beforeRename(treeId, treeNode, newName, isCancel) {
className = (className === "dark" ? "" : "dark");
showLog((isCancel ? "<span style='color:red'>" : "") + "[ " + getTime() + " beforeRename ] " + treeNode.name + (isCancel ? "</span>" : ""));
if (newName.length == 0) {
setTimeout(function () {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.cancelEditName();
alert("节点名称不能为空.");
}, 0);
return false;
}
return true;
}
function onRename(e, treeId, treeNode, isCancel) {
showLog((isCancel ? "<span style='color:red'>" : "") + "[ " + getTime() + " onRename ] " + treeNode.name + (isCancel ? "</span>" : ""));
}
function showRemoveBtn(treeId, treeNode) {
return !treeNode.isFirstNode;
}
function showRenameBtn(treeId, treeNode) {
return !treeNode.isLastNode;
}
function showLog(str) {
if (!log) log = $("#log");
log.append("<li class='" + className + "'>" + str + "</li>");
if (log.children("li").length > 8) {
log.get(0).removeChild(log.children("li")[0]);
}
}
function getTime() {
var now = new Date(),
h = now.getHours(),
m = now.getMinutes(),
s = now.getSeconds(),
ms = now.getMilliseconds();
return (h + ":" + m + ":" + s + " " + ms);
}
var newCount = 1;
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='增加节点' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.tId);
if (btn) btn.bind("click", function(){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"新节点" + (newCount++)});
return false;
});
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
};
function selectAll() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.setting.edit.editNameSelectAll = $("#selectAll").attr("checked");
}
//-->
</SCRIPT>
<ul id="treeDemo" class="ztree"></ul>
{% endblock %}
{% block tail %}
<SCRIPT>
$(document).ready(function () {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
$("#selectAll").bind("click", selectAll);
});
</SCRIPT>
{% endblock %}
有一个小问题
ztree的编辑功能当中没有默认增加。所以增加这个功能写在了，默认样式表中也没有这个样式。
基础示例当中有定义这个CSS。
.ztree li span.button.add {
margin-left: 2px;
margin-right: -1px;
background-position: -144px 0;
vertical-align: top;
*vertical-align: middle
}
我就随便写进了demo.css，这样显示的就正常了。
4.定制flask-admin的显示
待编辑功能写完，再来研究这个问题。
六：ztree的编辑功能
1.简介
默认的flask-admin功能是不能管理这个树形结构的。它管理的是简单结构，就是 id pid name 这种格式。
或许可以尝试由简单格式，自动创建为左右值树格式