树,因其清晰明了的展现形式而被广泛的使用

日常的开发过程中我们需要经常与“树”打交道,例如公司的组织架构树、服务器的项目归属树,管理后台侧边树等等,本篇文章介绍关于树的两个内容

  1. 多功能的前端树插件zTree
  2. Django中关于树的model设计

zTree

zTree是一个开源的依靠JQuery实现的多功能树插件,具有性能优异、配置灵活、功能强大的特点

之前的系列前端插件文章已经多次介绍过将前端插件引入自己项目中的方法,这里就不赘述了,如有问题也可以参考文章末尾给出的Demo代码,在引入JS/CSS之后只需要如下代码即可构建一颗树

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

<script>
var setting = {
data: {
simpleData: {
enable: true
}
}
}; var zNodes = [
{id: 1, pId: 0, name: "OPS-COFFEE ", open: true},
{id: 2, pId: 1, name: "运营部", open: true},
{id: 3, pId: 1, name: "市场部", open: true},
{id: 4, pId: 1, name: "综合部", open: true},
{id: 5, pId: 2, name: "产品部", open: true},
{id: 6, pId: 2, name: "技术部", open: true},
{id: 7, pId: 3, name: "销售部", open: true},
{id: 8, pId: 4, name: "人事部", open: true},
{id: 9, pId: 4, name: "财务部", open: true},
]; $.fn.zTree.init($("#treeDemo"), setting, zNodes);
</script>

$.fn.zTree.init初始化树,这里需要三个参数,第一个参数是加载树结构的Jquery对象,setting为ztree的各种配置参数,zNodes为ztree的具体数据

zTree的配置采用json的格式,按照配置类型分为了界面配置view,数据配置data,编辑配置edit,复选框配置check,异步加载配置async以及各种回调函数配置callback,配置丰富且强大

zTree支持两种数据模式,简单数据模式和标准数据模式,简单数据模式就像我们上边例子中这样的数据结构,而标准数据模式就需要将数据构造成复杂的JSON嵌套格式,像下边这样

var zNodes = [{
"name": "OPS-COFFEE",
"open": true,
"children": [
{
"name": "运营部",
"open": true,
"children": [
{"name": "产品部","open": true},
{"name": "技术部","open": true}
]
},
{
"name": "市场部",
"open": true,
"children": [
{"name": "销售部","open": true}
]
},
{
"name": "综合部",
"open": true,
"children": [
{"name": "人事部","open": true},
{"name": "财务部","open": true}
]
}
]
}];

标准模式数据结构复杂但父子关系清晰,简单模式数据则相反,示例中我们使用了简单数据模式,需要配置simpleData的enable属性为true

完成以上配置后可以看到页面效果如下

Django

既然前端页面已经能够正常展示树了,后端就只需要返回前端对应的数据格式即可,Django中最简单的方式就是使用Foreignkey的自关联,模型设计如下:

class Department(models.Model):
name = models.CharField(
max_length=128, unique=True, verbose_name='名称')
parent = models.ForeignKey(
'self', on_delete=models.PROTECT, db_constraint=False,
null=True, blank=True, verbose_name='父部门')

ForeignKey第一个参数用self就表示自关联,自己关联自己,还有两个Foreignkey的重要参数解释如下:

on_delete: 控制当外键引用的对象被删除时指定的SQL约束行为

  • CASCADE:级联删除,当你删除数据时与之关联的也会删除
  • PROTECT:保护模式,当你删除数据时会抛出ProtectedError的错误
  • SET_NULL:设置为空,当你删除数据时外键字段被设置为空,前提是有设置null=True, blank=True
  • SET_DEFAULT:设置默认值,当你删除数据时外键字段设置为默认值,前提是有设置default
  • DO_NOTHING:什么也不做,但这可能会导致你在调用数据时报错
  • SET:设置一个指定的自定义实例,官方案例如下
from django.conf import settings
from django.contrib.auth import get_user_model
from django.db import models def get_sentinel_user():
return get_user_model().objects.get_or_create(username='deleted')[0] class MyModel(models.Model):
user = models.ForeignKey(
settings.AUTH_USER_MODEL,
on_delete=models.SET(get_sentinel_user),
)

这个案例的意思是当删除外键字段user有关联时调用get_sentinel_user方法,这个方法会返回一个username为deleted的实例

db_constraint: 控制是否在数据库中为此外键创建约束,默认为True。在数据库中创建外键约束是数据库规范中明令禁止的行为,那么我们可以设置db_constraintFalse从而不在数据库层面创建约束,但同样可以使用Django为Foreignkey提供的各种关联查询

接下来可以通过如下代码将数据库中的数据转成ztree所能使用的简单模式数据并返回

def tree(request):
mList = Department.objects.all() _data = [
{
'id': x.id,
'name': x.name,
'pId': x.parent.id if x.parent else 0, 'open': 1
} for x in mList
] return render(request, 'tree.html', {'data': _data})

注意在前端使用时需要用{{data|safe}}的方式,添加|safe主要是因为Django为了安全默认会对HTML、JS等语法标签进行转义,但我们所传给前端的数据不希望转义可以通过添加|safe来实现

完整Demo

文章源码已上传至Github,除了以上基础代码外还包含下拉框加载树等功能,公众号后台回复06获取源码地址吧


相关文章推荐阅读:

Django+zTree构建组织架构树的更多相关文章

  1. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  2. iphone开发 IOS 组织架构图

    转载自 :http://blog.csdn.net/mashi321323/article/details/18267719   登录|注册     mashi321323的专栏       目录视图 ...

  3. Atitit jOrgChart的使用  组织架构图css html

    Atitit jOrgChart的使用  组织架构图css html 1. 项目要做组织架构图,要把它做成自上而下的树形结构,于是决定1 2. Html导入 以来的css js1 2.1. 数据来源 ...

  4. 树形插件zTree与组织插件jOrgChart交互

    <html> <head> <title>组织架构</title> <meta http-equiv="content-type&quo ...

  5. 使用jOrgChart插件, 异步加载生成组织架构图

    jOrgChart插件是一个用来实现组织结构图的Jquery的插件- 一.特点 1.支持拖拽修改子节点: 2.支持节点缩放展示: 3.方便修改css定义样式: 4.超轻量型: 5.兼容性好,基本支持所 ...

  6. 学习django之构建Web是Meta嵌套类的几处使用

    Django中meta嵌套类的使用 1.模型中使用嵌套类 在定义抽象模型时如: class Meta : abstract=true 用来指明你创建的模型是一个抽象基础类的模型继承. 2.在一个对象对 ...

  7. python + django + echart 构建中型项目

    1. python生产环境, 多层modules 导入问题: 多个modules 如何导入不同级别的包: 在每个modules下新建 __init__.pyimport os, sys dir_myt ...

  8. 前端vue2-org-tree实现精美组织架构图

    最近遇到开发组织架构的需求,与以往开发的组织架构不同,不光要展示人名,还要显示职务(或者子公司名称).对应的头像等,并且要考虑,如果用户未上传头像,需使用默认头像(男.女.中性),(⊙o⊙)…要尊重尊 ...

  9. OC 框架组织架构图

随机推荐

  1. 生成数据库自增不重复ID的方法

    namespace ConsoleApp1 { class Program { static void Main(string[] args) { ); ; i < ; i++) { var t ...

  2. 为什么说是时候拥抱.NET CORE了?

    微软和社区已经做了大量艰苦的工作,使.Net Core成为市场上具有竞争力的框架,帮助开发人员快速开发具有最佳性能和可扩展性的强大应用程序.做的最棒的事情是.Net Framework开发人员不需要任 ...

  3. 怎样在自己的网页中调用百度API

    https://blog.csdn.net/u010251278/article/details/52877370 以下内容转自上述网站,为了以后的学习方便,为此才特地将该网站内容转到自己的博客,多谢 ...

  4. Vue的基本使用(一)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. C#中线程间操作无效: 从不是创建控件 txtBOX 的线程访问它。

    delegate void 委托名(方法名); void 方法名() { if(txtBox.invokeRequered) { 委托名 d=new 委托名(); txtBox.invoke(d); ...

  6. MyEclipse2014破解版

    百度云:链接:http://pan.baidu.com/s/1c3jKMa 密码:yss0 等版本)后,不要打开软件. 二.解压破解文件压缩包,得到一下文件列表: 三.双击run.bat,即可运行cr ...

  7. vue教程(三)-slot\keep-alive的使用

    一.slot其实就是填坑操作,父组件传递dom结构,是vue提供的一种内置组件(组件知识请查看上篇博客内容) 写法:<slot></slot> 例子: var child = ...

  8. leetcode 48 矩阵旋转可以这么简单

    一行代码解决矩阵旋转(方法三). 方法1: 坐标法 def rotate(self, matrix): n = len(matrix) # 求出矩阵长度 m = (n + 1) // 2 # 求出层数 ...

  9. Docker volume speed up npm install

    上一节决定在Jenkins中采用Docker作为构建环境,于是就可以为所欲为的使用各种node版本编译我们的项目.解决了版本切换问题.然而,Docker设计的目的就是纯净的执行环境,因此每次运行doc ...

  10. Maven重新下载未下载完成的jar包

    使用maven下载jar包,经常会遇到下载失败的情况,如果失败的jar包过多,或是不清楚到底有那些jar包在下载过程中出现了问题.可通过maven命令重新批量下载未成功的jar包. 1,打开cmd , ...