pythondjango多级业务树形结构规划及页面渲染

项目说明

  设计一个 业务 树形结构规划,多层灵活型结构,

  从 建表设计 到 浏览器前端展示 整体的结构规划

  使用 python django web框架;和一个js 树形结构插件treeview(插件说明 http://www.cnblogs.com/jyh317/p/3763564.html)

表设计

  使用django models 设计表, 字段如下,新增业务时,在 upper_business 字段填上该业务的直属上级业务 id 号(此id号为该表中已经存在的业务id号),若新增业务为最上级业务 upper_business 为空。

#工作业务
class business_detail(models.model):
upper_business = models.integerfield(blank=true, null=true, verbose_name=u’上级业务’)
name = models.charfield(max_length=100, unique=true, verbose_name=u’业务名称’)
info = models.textfield(max_length=200, null=true, blank=true, verbose_name=u’业务说明’)
domain = models.charfield(max_length=50, null=true, blank=true, verbose_name=u’域名’)
monitor_url = models.charfield(max_length=50, null=true, blank=true, verbose_name=u’监控页面’)
comment = models.charfield(max_length=100, blank=true, null=true, verbose_name=u’备注’)

在 django admin 后台添加新业务如图;可自行设计自己的前端新增业务页面,约束字段(如上级业务必须填写已存在id)

######## 开始前端展示 #########

视图函数

  在django views 中添加业务展示视图,使用django 特色models 查询出第一级业务(第一级业务唯一)传递到模板层

def businessbasic(request):
businessobj = business_detail.objects.all()
firster = businessobj.get(eams/businessbasic.html’, locals())

前端模板

  浏览此下之前,需要对js 树形结构插件treeview 的使用有所了解

  先载入treeview js文件

《script》
《script》

业务树p 主体设计

{% load eamsfilter %}

{{ firster.name }}
{% if firster.id|getnextbusiness %}  

{% for node in firster.id|getnextbusiness %} 
{% include “eams/businessnode.html” %}  
{% endfor %}

{% endif %}

$(“#tree”).treeview();
《script》

模板过滤器(eamsfilter.py)代码, 此处不做更多解释

#-*-coding:utf-8-*-
__author__ = ‘zhouwang’
from eams_apps.models import *
from django import template
register = template.library()
@register.filter(name=’getnextbusiness’)
def getnextbusiness(value):
return business_detail.objects.filter(upper_business = value)

节点模板(核心)eams/businessnode.html,当父级业务判断有下级业务时,引入此模板,提出节点代码为单独的html文件,方便复用及模板层的迭代,模板迭代的设计,实现业务节点多层(未知层数)结构展示

{% load eamsfilter %}  
{{ node.name }}  
{% if node.id|getnextbusiness %}  

{% for node in node.id|getnextbusiness %}  
{% include “eams/businessnode.html” %}  
{% endfor %}

{% endif %}

前端效果

  模板代码预留了业务节点 id 号,前端点击触发业务节点,ajax 请求节点业务信息及页面展示获取的节点信息, 不再继续阐述。。。

Posted in 未分类

发表评论