阅读排行
首页 > 技术文章

Django中使用Bootstrap展示树形结构

概述

在企业管理系统中，经常会有树形结构需求，例如：组织结构、权限等等，本文使用Django和Bootstrap Tree View来展示企业组织结构和对应组织的人员。

实现

模型类(models.py)

  1. class Department(models.Model):
  2.     name = models.CharField(u‘单位名称‘, max_length=30)
  3.     pri = models.IntegerField(u‘序号‘)
  4.     desc = models.CharField(u‘备注‘, max_length=100)
  5.     parent = models.ForeignKey(‘self‘, blank=True, null=True, related_name=‘children‘, verbose_name=‘上级单位‘)
  6.     full_path = models.CharField(u‘全路径‘, max_length=20, blank=True, null=True)
  7.     deep_level = models.IntegerField(u‘深度‘, default=0)
  9.     def __str__(self):
  10.         return self.name
  12.     class Meta:
  13.         verbose_name = u‘组织结构‘
  14.   verbose_name_plural = u‘组织结构‘
  16. class People(models.Model):
  17.     PEOPLE_TYPE_CHOICES = (
  18.         (‘A‘, u‘公务员‘),
  19.         (‘B‘, u‘事业编‘),
  20.         (‘C‘, u‘合同工‘),
  21.         (‘D‘, u‘临时工‘),
  22.     )
  23.     user = models.OneToOneField(User)
  24.     nickname = models.CharField(u‘昵称‘, max_length=50)
  25.     job = models.CharField(u‘职务‘, max_length=50)
  26.     job_type = models.CharField(u‘类别‘, choices=PEOPLE_TYPE_CHOICES, max_length=2, default=‘A‘)
  27.     department = models.ForeignKey(Department, related_name=‘peoples‘, verbose_name=‘单位‘)
  29.     def __str__(self):
  30.         return self.nickname
  32.     class Meta:
  33.         verbose_name = u‘人员‘
  34.   verbose_name_plural = u‘人员‘
  36. class TreeNode():
  37.     def __init__(self):
  38.         self.id = 0
  39.   self.text = "Node 1"
  40.   self.href = "#node-1"
  41.   self.selectable = True
  42.   self.state = {
  43.                          ‘checked‘: True,
  44.                          ‘disabled‘: True,
  45.                          ‘expanded‘: True,
  46.                          ‘selected‘: True,
  47.                      },
  48.         self.tags = [‘available‘],
  49.         self.nodes = []
  51.     def to_dict(self):
  52.         icon = (len(self.nodes) > 0) and ‘glyphicon glyphicon-list-alt‘ or ‘glyphicon glyphicon-user‘
  53.   return {
  54.             ‘id‘: self.id,
  55.             ‘text‘: self.text,
  56.             ‘icon‘: icon,
  57.             ‘href‘: self.href,
  58.             ‘tags‘: [‘1‘],
  59.             ‘nodes‘: self.nodes,
  60.         }

Department为组织结构，为表示上下级关系，使用了自关联，ForeignKey的第一个参数为self
，为方便上级查找所有的下级，添加related_name=’children’，这样在查询指定单位的下级时候，可以使用：

  1. p = Department.objects.get(parent=None)
  2. children = p.children.all()

来查询所有的下级。
People类为单位人员，我将它关联到Django内建的User，实现User和People的一对一关联，可以在后台管理页面直接编辑People，People类有一个外键，指向Department，同样添加了related_name=’peoples’方便查询。
为显示树状结构，我建立了一个TreeNode类，这个类不需要保存到数据库，它的属性主要供Bootstrap Tree View使用，因为Python的json模块不能直接序列化TreeNode类，所以添加一个to_dict方法，先将TreeNode转化为一个dict。

URL映射(urls.py)

  1. from django.conf.urls import patterns, url
  2. from dept import views as dept_vies
  4. urlpatterns = [
  5.     url(r‘^show/$‘, dept_vies.show, name=‘dept_show‘),
  6.     url(r‘^tree/$‘, dept_vies.tree, name=‘dept_tree‘),
  7.     url(r‘^people/(\d+)$‘, dept_vies.people, name=‘dept_people‘),
  8. ]

视图(views.py)

  1. def get_dept_tree(parents):
  2.     ‘‘‘
  3.     根据提供的父节点，迭代出所有的子节点，并用一个dict的列表来表示
  4.     :param parents 父节点列表:
  5.     :return 返回dict列表:
  6.     ‘‘‘
  7.     display_tree = []
  8.     for p in parents:
  9.         node = TreeNode()
  10.         node.id = p.id
  11.         node.text = p.name
  12.         children = p.children.all()
  13.         if len(children) > 0:
  14.             node.nodes = get_dept_tree(children)
  15.         display_tree.append(node.to_dict())
  16.     return display_tree
  18. def show(request):
  19.     return render(request, "dept/show.html")
  21. def tree(request):
  22.     root = Department.objects.get(parent=None)
  23.     tree = get_dept_tree([root])
  24.     return JsonResponse(tree, safe=False)
  26. def people(request, pk):
  27.     dept = Department.objects.get(pk=pk)
  28.     peoples = dept.peoples.all()
  29.     return render(request, "dept/peoples.html", {‘peoples‘: peoples})

模板类

show.html

  1. {% extends ‘base.html‘ %}
  2. {% block title %}组织结构{% endblock %}
  3. {% block head %}
  4.     <link type="text/css" href="/static/css/bootstrap-treeview.min.css">
  5. {% endblock %}
  6. {% block script %}
  7.     <script type="text/javascript" src="/static/js/bootstrap-treeview.min.js"></script>
  8.     <script type="text/javascript">
  9.         $(function () {
  10.             $.ajaxSetup({
  11.                 data: {csrfmiddlewaretoken: ‘{{ csrf_token }}‘ },
  12.             });
  13.             var tree = $.getJSON("{% url ‘dept_tree‘ %}", ‘‘, function (data) {
  14.                 $(‘#tree‘).treeview({
  15.                     data: data,
  16.                     level: 2,
  17.                     showTags: true,
  18.                     onNodeSelected: function (event, node) {
  19.                         $.post("../people/"+node.id, {}, function(data){
  20.                             console.log(data);
  21.                             $("#result").html(data);
  22.                         })
  23.                     }
  24.                 });
  25.             });
  26.         });
  27.     </script>
  28. {% endblock %}
  30. {% block content %}
  31.     <hr>
  32.     <div class="row">
  33.         <div id="tree" class="col-md-3"></div>
  34.         <div id="result" class="col-md-9">
  35.             sss
  36.         </div>
  37.     </div>
  38. {% endblock %}

Django 中自带了防止CSRF攻击的功能，GET请求不需要 CSRF 认证，POST 请求需要正确认证才能得到正确的返回结果，如果没有认证，常常会出现下面django csrf token missing or incorrect的错误。最简洁的方法时设置JQuery的ajax属性：

  1. $.ajaxSetup({
  2.     data: {csrfmiddlewaretoken: ‘{{ csrf_token }}‘ },
  3. });

Bootstrap Tree View的使用文档见GitHub

people.html

  1. <table class="table table-bordered">
  2.     <tr>
  3.         <th>姓名</th><th>职务</th><th>类型</th>
  4.     </tr>
  5.     {% for people in peoples %}
  6.     <tr>
  7.         <th>{{ people.nickname }}</th>
  8.         <th>{{ people.job }}</th>
  9.         <th>{{ people.get_job_type_display }}</th>
  10.     </tr>
  11.         {% empty %}
  12.         <tr><th colspan="3">没有人员</th> </tr>
  13.     {% endfor %}
  14. </table>

在show.html页面，当点击不同的节点时候，会发出形如“people/1”的ajax请求，返回结果是一段HTML代码，通过JQuery的html()方法动态加载到show.html页面上。
people有一个job_type属性，为一个元组，如果直接使用people.job_type，仅仅会显示A、B、C等结构，如果想显示对应的描述信息，需要使用get_job_type_display。

总结

本文基本实现树形结构的展示、一对多关联查询、数据异步加载等功能，但具体细节还不够完善。
树形结构每个单位右边的角标没有实现，仅仅用了一个固定数字1来占位，设想可以显示单位人数，待完善。
树形结构的查询需要进一步封装，如果要查询根节点下的所有单位，目前只能够多次查询，查询效率不高，考虑使用full_path和deep_level两个冗余字段存储单位的全路径和节点深度，通过startswith来查询所有子节点，如果使用SQL SERVER数据库，可以通过触发器的方式动态修改这两个字段你，使用Django目前还没有较好的办法。





文章来自：http://www.cnblogs.com/Leman/p/5339884.html
© 2021 jiaocheng.bubufx.com  联系我们
ICP备案：鲁ICP备09046678号-3