sqlalchemy tree 树形分类 无限极分类的管理。预排序树，左右值树。sqlalchemy-mptt
简介：
无限极分类是一种比较常见的数据格式，生成组织结构，生成商品分类信息，权限管理当中的细节权限设置，都离不开无限极分类的管理。
常见的有链表式，即有一个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 这种格式。
或许可以尝试由简单格式，自动创建为左右值树格式
2.
3.
七：
八：
九：
