Python Django Business tree structure planning and page rendering

Overview:

In the project, the parent to child structure is not uncommon, if only two layers of tree structure, we can use the database of foreign key design easy to do, the child business table design a field foreign key to the parent business table, this way to the parent, parent to child query is very simple.

But often the parent-child structure will have a level two level three and so on multi-level planning, because the sub-structure of the number of layers is uncertain, the child can have children, and so on, such a tree-shaped, foreign key design can not be done.

Project description

Design a business tree-shaped structure planning, multi-layer flexible structure,

Design from the table to the front of the browser to show the overall structure planning

　　using the Python Django Web framework, and a JS tree-shaped plug-in TreeView(plugin description http://www.cnblogs.com/jyh317/p/3763564.html)

Table Design

Using the Django Models design table, the fields are as follows, when you add a business, in the upper_business field, fill in the immediate ancestor business ID number for the business ( this ID number is the business ID number that already exists in the table ) . If the new business is the most superior business upper_business is empty .

1 #Work Business2 classBusiness_detail (models. Model):3Upper_business = models. Integerfield (Blank=true, Null=true, Verbose_name=u'Superior Business')4Name = models. Charfield (max_length=100, Unique=true, Verbose_name=u'Business Name')5info = models. TextField (max_length=200, Null=true, Blank=true, Verbose_name=u'Business Description')6Domain = models. Charfield (max_length=50, Null=true, Blank=true, Verbose_name=u'Domain name')7Monitor_url = models. Charfield (max_length=50, Null=true, Blank=true, Verbose_name=u'Monitoring Page')8Comment = models. Charfield (max_length=100, Blank=true, Null=true, Verbose_name=u'Notes')

Add a new business to the Django Admin background, design your own front-end new business page, constraint fields (such as parent business must fill in an existing ID)

######## begins front-end display of ######## #视图函数

Add a business Presentation view in Django views and use the Django featured models to query the first level of business ( first level business unique ) to the template layer

1 def Businessbasic (Request): 2     Businessobj = Business_detail.objects.all ()3     firster = Businessobj.get (id=1)     # get the first level of business 4     return render_to_response ('eams/businessbasic.html', locals ())

Front-end templates

Before you browse this, you need to know something about the use of the JS tree plug-in TreeView

Load the TreeView JS file First

1 <Linkhref= "/static/treeview/jquery.treeview.css"rel= "stylesheet"type= "Text/css" />2 <Scripttype= "Text/javascript"src= "/static/treeview/lib/jquery.cookie.js"></Script>3     <Scripttype= "Text/javascript"src= "/static/treeview/jquery.treeview.js"></Script>

Business Tree div Body Design

1 {% load eamsfilter%} <!--load Custom template filter --2         <Divstyle= "width:30%; border-right:1px solid #D8D8D8; min-height:300px; overflow:auto; Float:left">3             <ulID= "Tree"class= "Filetree">4                 <Li><spanID= "business_{{Firster.id}}"class= "folder">{{Firster.name}}</span>5 {% if firster.id|getnextbusiness%} <!--use template filters to determine the list of directly subordinate business, filter code downstairs and6                         <ul>7 {% for node in firster.id|getnextbusiness%} <!--traverse a subordinate business node --8 {% include "eams/businessnode.html"%} <!--refer to the Business Node Li template, (here the core design) separately explained--9 {% endfor%}Ten                         </ul> One {% endif%} A                 </Li> -             </ul> -             <Scripttype= "Text/javascript"> the             $("#tree"). TreeView (); -             </Script> -         </Div>

Template filter (eamsfilter.py) code, no more explanations here

1 #-*-coding:utf-8-*-2 __author__='Zhouwang'3  fromEams_apps.modelsImport*4  fromDjangoImportTemplate5Register =template. Library ()6@register. Filter (name='getnextbusiness')7 defgetnextbusiness (value):8     returnBusiness_detail.objects.filter (upper_business = value)

Node template (core) eams/businessnode.html, when the parent business is judged to have subordinate business, introduce this template, put forward the node code as a separate HTML file, convenient reuse and template layer iteration, template iteration design, realize multi-layer (unknown number of layers) structure display of business node

1{% load Eamsfilter%} <!--load filter --2<li><span id="business_{{Node.id}}" class="folder">{{Node.name}}</span> <!--render the currently traversed node--3{%ifNode.id|getnextbusiness%} <!--through the filter to determine whether the current business node has a subordinate business- -4<ul>5{% forNodeinchNode.id|getnextbusiness%} <!--traverse the subordinate business node of the current business node--6{% include"eams/businessnode.html"%} <!--again introduce itself page, Judge node, traverse node and so on, realize deep iteration to get multi-level business node--7{% ENDFOR%}8</ul>9{% ENDIF%}Ten</li>

Front End effect

Template code reserved the business Node ID number, the front-end click Trigger Business node, AJAX request node Business information and page display to obtain the node information, no longer continue to elaborate ...

Python Django Business tree structure planning and page rendering