Python django multi-level business tree structure Planning and page rendering, pythondjango

Python django multi-level business tree structure Planning and page rendering, pythondjango
Overview:

In the project, the Parent-Child structure is not uncommon. If there are only two tree structures, we can use the foreign key design of the database to easily achieve this, A child business table is designed with a single field of foreign keys to the parent business table, which makes queries to the parent and parent to the child very simple.

However, the Parent-Child structure usually has level-1, level-2, and level-3 multi-layer planning. because the number of sub-Child layers is not fixed, the sub-child can have sub-child and sub-child; such a tree structure will make the foreign key design unfeasible.

Project Description

Design a business tree structure Planning with multiple layers of flexible structures,

Overall structure Planning from Table creation design to browser front-end display

　　Use the python django web framework; and a js tree structure plug-in treeview(Plugin description http://www.cnblogs.com/jyh317/p/3763564.html)

Table Design

Use django models to design a table. The fields are as follows:Upper_businessEnter the Business ID (This ID number is an existing Business ID number in the table.), If the new business is the upper-level business, upper_business is empty.

1 # business 2 class Business_detail (models. model): 3 upper_business = models. integerField (blank = True, null = True, verbose_name = u'superior Service') 4 name = models. charField (max_length = 100, unique = True, verbose_name = u'business name') 5 info = models. textField (max_length = 200, null = True, blank = True, verbose_name = u'service description') 6 domain = models. charField (max_length = 50, null = True, blank = True, verbose_name = u 'domain name') 7 monitor_url = models. charField (max_length = 50, null = True, blank = True, verbose_name = u'monitoring page') 8 comment = models. charField (max_length = 100, blank = True, null = True, verbose_name = u'note ')

Add a new business in the django admin background. You can design your own front-end new business page and constrain the field (for example, the upper-level business must enter an existing id)

######## Start front-end display ######## view Functions

Add a business display view to django views and use django-specific models to query the first-level business (The first-level business is unique) Passed to the template Layer

1 def businemasic (request): 2 businessObj = Business_detail.objects.all () 3 firster = businessObj. get (id = 1) # get Level 1 business 4 return render_to_response ('eams/businatemasic.html ', locals ())

Front-end Template

Before you browse this section, you need to understand how to use the js tree structure plug-in treeview.

Load the treeview js file first

1 <link href="/static/treeview/jquery.treeview.css" rel="stylesheet" type="text/css" />2 <script type="text/javascript" src="/static/treeview/lib/jquery.cookie.js"></script>3     <script type="text/javascript" src="/static/treeview/jquery.treeview.js"></script>

Business tree div Subject Design

1 {% load eamsfilter %} <! -- Load the Custom template filter --> 2 <div style = "width: 30%; border-right: 1px solid # D8D8D8; min-height: 300px; overflow: auto; float: left "> 3 <ul id =" tree "class =" filetree "> 4 <li> <span id =" business _ {firster. id }}" class = "folder" >{{ firster. name }}</span> 5 {% if firster. id | getNextBusiness %} <! -- Use the template filter to obtain the list of subordinate businesses. The filter code is downstairs --> 6 <ul> 7 {% for node in firster. id | getNextBusiness %} <! -- Traverse subordinate business nodes --> 8 {% include "eams/businessNode.html" %} <! -- Reference the business node li template (core design here) downstairs explain separately --> 9 {% endfor %} 10 </ul> 11 {% endif %} 12 </li> 13 </ul> 14 <script type = "text/ javascript "> 15 $ (" # tree "). treeview (); 16 </script> 17 </div>

Template filter (eamsfilter. py) code, which is not explained here

1 #-*-coding:utf-8-*-2 __author__ = 'zhouwang'3 from eams_apps.models import *4 from django import template5 register = template.Library()6 @register.filter(name='getNextBusiness')7 def getNextBusiness(value):8     return Business_detail.objects.filter(upper_business = value)

The node template (CORE) eams/businessNode.html introduces this template when the parent-level business determines that there are subordinate businesses, and proposes that the Node Code is a separate html file to facilitate reuse and iteration at the template layer, the iterative template design enables multi-layer (unknown layer) structure Presentation of business nodes

1 {% load eamsfilter %} <! -- Load filter --> 2 <li> <span id = "business _ {node. id }}" class = "folder"> {node. name }}</span> <! -- Render the currently traversed node --> 3 {% if node. id | getNextBusiness %} <! -- Use the filter to determine whether the current business node has a subordinate business --> 4 <ul> 5 {% for node in node. id | getNextBusiness %} <! -- Traverse the subordinate business nodes of the current business node --> 6 {% include "eams/businessNode.html" %} <! -- Introduce its own page, Judge nodes, traverse nodes, and so on, achieve deep iteration to get multi-level business nodes --> 7 {% endfor %} 8 </ul> 9 {% endif %} 10 </li>

Front-end Effects

The template Code reserves the business node id. The front-end click triggers the business node, and the ajax request Node Business Information and page displays the obtained node information...