openstack页面自定义插件使用详解(django、ajax、post)(zTree为例)

Wesley13
• 阅读 586

感谢朋友支持本博客,欢迎共同探讨交流,由于能力和时间有限,错误之处在所难免,欢迎指正!

如有转载,请保留源作者博客信息。

Better Me的博客blog.csdn.net/tantexian

如需交流,欢迎大家博客留言。

1、鉴于国内java开发人员比较多,java web方面的技术比较成熟。所以用python django(openstack)框架和java的strurs做个类比,让大家能够更直观的理解、更快的进入到开发中:

附图大致对比下,具体细节,自行查找相关资料:

openstack页面自定义插件使用详解(django、ajax、post)(zTree为例)

2、接下来正式开始讲解,如何在openstack中使用自定义插件,本文以Jquery zTree树形插件为例。

第一步封装url地址,请求数据,在urls中自定义url:

openstack页面自定义插件使用详解(django、ajax、post)(zTree为例)

为了方便后续大家复制代码,也顺带附上源代码

urlpatterns = patterns('',

url(r'^$', views.IndexView.as_view(), name='index'),

url(r'^(?P<tenant_id>[^/]+)/update/$',views.UpdateIsolationView.as_view(), name='update'),

url(r'^(?P<tenant_id>[^/]+)/tree/$',views.TreeView.as_view(), name='tree'),

url(r'^(?P<tenant_id>[^/]+)/get_tree_data/$',views.JSONGetView.as_view(), name='get_tree_data'),

url(r'^(?P<tenant_id>[^/]+)/set_tree$',views.JSONSetView.as_view(), name='set_tree'),

)

3、根据url规则匹配到对应的views的JSONGetView类:

openstack页面自定义插件使用详解(django、ajax、post)(zTree为例)

from django.views import generic

from django.http import HttpResponse # noqa

import json

class JSONGetView(generic.View):

def get(self, request, *args, **kwargs): #定义get方法

tenant_id = self.kwargs["tenant_id"] #从url中截取参数值tenant_id

aggregates = []

try:

aggregates = api.nova.aggregate_details_list(self.request)

api.nova.isolatation_tree_list(self.request, tenant_id)

except Exception:

exceptions.handle(request,

_('Unable to retrieve host aggregates list.'))

aggregates.sort(key=lambda aggregate: aggregate.name.lower())

#调用底层api 构造 zTree的数据

tree_list = []

for ag in aggregates:

tree_data = {}

tree_data['id'] = ag.availability_zone

tree_data['name'] = ag.availability_zone

tree_data['pId'] = 'NULL'

tree_data['open'] = 'true'

if tree_data not in tree_list:

tree_list.append(tree_data)

tree_data = {}

tree_data['id'] = ag.name

tree_data['name'] = ag.name

tree_data['pId'] = ag.availability_zone

tree_data['open'] = 'true'

if tree_data not in tree_list:

tree_list.append(tree_data)

for hostname in ag.hosts:

tree_data = {}

tree_data['id'] = hostname

tree_data['name'] = hostname

tree_data['pId'] = ag.name

tree_data['open'] = 'true'

if tree_data not in tree_list:

tree_list.append(tree_data)

result = json.dumps(tree_list) #此处将python对象转换成json对象

print (result)

return HttpResponse(result,content_type="application/json")

4、到此获取数据的url完成,测试下url(浏览器直接访问):

openstack页面自定义插件使用详解(django、ajax、post)(zTree为例)

http://192.168.10.31/dashboard/admin/isolations/2a4fe5e733e44982b1d576c5a0fe4bfd/get_tree_data/

得到数据:

[{

 "open": "true",

 "pId": "NULL",

 "id": "zone1",

 "name": "zone1"

},

{

 "open": "true",

 "pId": "zone1",

 "id": "ag1",

 "name": "ag1"

},

{

 "open": "true",

 "pId": "ag1",

 "id": "node32",

 "name": "node32"

},

{

 "open": "true",

 "pId": "ag1",

 "id": "node31",

 "name": "node31"

},

{

 "open": "true",

 "pId": "zone1",

 "id": "ag2",

 "name": "ag2"

},

{

 "open": "true",

 "pId": "ag2",

 "id": "node33",

 "name": "node33"

},

{

 "open": "true",

 "pId": "NULL",

 "id": "zone2",

 "name": "zone2"

},

{

 "open": "true",

 "pId": "zone2",

 "id": "ag3",

 "name": "ag3"

},

{

 "open": "true",

 "pId": "ag3",

 "id": "node35",

 "name": "node35"

},

{

 "open": "true",

 "pId": "ag3",

 "id": "node34",

 "name": "node34"

}]

url能正确获取数据,测试通过。

5、用ajax在html页面中请求该url获取数据:

先附上页面模板代码:

openstack页面自定义插件使用详解(django、ajax、post)(zTree为例)

openstack页面自定义插件使用详解(django、ajax、post)(zTree为例)

其中javascript要写在标签{% block modal-body %}中才能失效,具体的zTree的js导入本文使用了为压缩的方式,直接导入。

openstack页面自定义插件使用详解(django、ajax、post)(zTree为例)

{# add by ttx 2014-9-25#}

zTree插件路径:

openstack页面自定义插件使用详解(django、ajax、post)(zTree为例)

详解ajax请求:

var url = '/dashboard/admin/isolations/{{ tenant_id }}/get_tree_data';  #此处为ajax的url地址,与步骤4中浏览器访问一致

$.ajax({ #其中$代表Jquery插件,ajax为Jquery插件的方法

type: "get", #type主要有get、post。其中get用于获取数据,是幂等操作、post用于跟新数据

async: false, #false代码同步刷新,true代表异步刷新。本示例需要等到数据返回再进行tree的渲染,因此需要同步

url: url, #请求的url地址

dataType: "json",  #数据返回类型为json

success: function (data) { #ajax请求成功之后得到数据data,执行success:后面function里面代码

json = JSON.stringify(data);

host_tree_data = JSON.parse(json)

}

});

更多ajax详细使用讲解请自行参考相关资料。

后续就是具体的zTree根据得到的数据host_tree_data ,生成zone、aggregate、host的节点树,附上简单代码,不详解:

{% extends "horizon/common/_modal_form.html" %}

{% load i18n %}

{% load url from future %}

{% block form_id %}create_image_form{% endblock %}

{% block form_action %}{% url 'horizon:admin:images:create' %}{% endblock %}

{% block form_attrs %}enctype="multipart/form-data"{% endblock %}

{% block modal-header %}{% trans "Isolatation tree" %}{% endblock %}

{% block modal-body %}

用 zTree 方法 勾选 checkbox

\[ 文件路径: excheck/checkbox\_fun.html \]
      11111111111111111111111111111111111111111111
    • 1、beforeCheck / onCheck 事件回调函数控制

      • 利用 beforeCheck / onCheck 事件回调函数 可以控制是否允许 更改 节点勾选状态,这里简单演示如何监控此事件
      • 这里还演示了 checkNode / checkAllNodes 方法触发 beforeCheck / onCheck 事件回调函数的情况,试试看:

             setting.check.autoCheckTrigger: false

             执行勾选方法是否触发 callback

            单节点--[ 勾选 ]

            [ 取消勾选 ]

            [ 勾选 切换 ]

            单节点 ( 影响父子 )--[ 勾选 ]

            [ 取消勾选 ]

            [ 勾选 切换 ]

            全部节点--[ 勾选 ]

            [ 取消勾选 ]

      • 使用 zTreeObj.checkNode / checkAllNodes 方法,详细请参见 API 文档中的相关内容

        beforeCheck / onCheck log:

      • 2、setting 配置信息说明

        • 同 "checkbox 勾选操作" 中的说明
      • 3、treeNode 节点数据说明

        • 同 "checkbox 勾选操作" 中的说明

      {% endblock %}

      {% block modal-footer %}

      <input class="btn btn-primary pull-right" type="submit" value="{% trans "Save" %}" />

      {% trans "Cancel" %}

      {% endblock %}

      跟多zTree使用,请自行参考zTree官网:www.ztree.me/

      页面最终展示:

      openstack页面自定义插件使用详解(django、ajax、post)(zTree为例)

      此处的zTree页面比较丑,可以修改css样式,调整,附上bootstrap风格的树形插件样式。 http://www.js-css.cn/jscode/nav/nav23/

      openstack页面自定义插件使用详解(django、ajax、post)(zTree为例)

      到此通过ajax获取数据到页面展示讲解完毕。

      6、讲完ajax从后台获取数据到前台接下来讲解,如何通过ajax,把页面的数据传递给后台处理:

      openstack页面自定义插件使用详解(django、ajax、post)(zTree为例)

      附上代码:

      function getAllChangeNodes() {

      var treeObj = $.fn.zTree.getZTreeObj("treeDemo");

      var nodes = treeObj.getChangeCheckedNodes();

      $('#mytest').html(JSON.stringify(nodes)); #JSON.stringify(nodes)将js对象nodes,转化为json对象

      var url = '/dashboard/admin/isolations/{{ tenant_id }}/set_tree';

      var data={}; #url中传递的数据,相当于$url?jsonTree=JSON.stringify(nodes)

      data["jsonTree"] = JSON.stringify(nodes);

      jQuery.ajax({

      type:"POST", #ajax类型,post进来进行更新

      url : url,

      data:data,

      dataType : "json",

      beforeSend: function(xhr, settings){ #此处的beforeSend用来解决ajax在django中报csrftoken错误

      var csrftoken = $.cookie('csrftoken');

      xhr.setRequestHeader("X-CSRFToken", csrftoken);

      },

      success : function(data) {  #ajax请求成功之后执行

      }

      });

      }

      根据上述 url = '/dashboard/admin/isolations/{{ tenant_id }}/set_tree';到urls.py中找对应匹配的url:

      openstack页面自定义插件使用详解(django、ajax、post)(zTree为例)

      urlpatterns = patterns('',

      url(r'^$', views.IndexView.as_view(), name='index'),

      url(r'^(?P<tenant_id>[^/]+)/update/$',views.UpdateIsolationView.as_view(), name='update'),

      url(r'^(?P<tenant_id>[^/]+)/tree/$',views.TreeView.as_view(), name='tree'),

      url(r'^(?P<tenant_id>[^/]+)/get_tree_data/$',views.JSONGetView.as_view(), name='get_tree_data'),

      url(r'^(?P<tenant_id>[^/]+)/set_tree$',views.JSONSetView.as_view(), name='set_tree'),

      )

      根据url匹配规则,跟进到 JSONSetView:

      openstack页面自定义插件使用详解(django、ajax、post)(zTree为例)

      class JSONSetView(generic.View):

      def post(self, request, *args, **kwargs): #因为ajax的请求类型为post因此实现post函数,否则会报错

      tenant_id = self.kwargs["tenant_id"] #从URL中获取tenant_id

      json_tree = request.POST.get("jsonTree") #从ajax发过来的请求中获取jsonTree json数据

      tree_change_nodes = json.loads(json_tree) #将页面传递的json数据,转换为python对象,具体转换规则自行参考

      #此处根据前端传送的数据,调用api传递给后端处理

      api.nova.isolatation_add_tree(request, tenant_id, tree_change_nodes)

      return HttpResponse(tree_change_nodes,content_type="application/json")

      讲解完毕!

      点赞
      收藏
      评论区
      推荐文章
      blmius blmius
      3年前
      MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
      文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
      皕杰报表之UUID
      ​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
      待兔 待兔
      4个月前
      手写Java HashMap源码
      HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
      Jacquelyn38 Jacquelyn38
      3年前
      2020年前端实用代码段,为你的工作保驾护航
      有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
      Wesley13 Wesley13
      3年前
      Java获得今日零时零分零秒的时间(Date型)
      publicDatezeroTime()throwsParseException{    DatetimenewDate();    SimpleDateFormatsimpnewSimpleDateFormat("yyyyMMdd00:00:00");    SimpleDateFormatsimp2newS
      Wesley13 Wesley13
      3年前
      mysql设置时区
      mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
      Wesley13 Wesley13
      3年前
      00:Java简单了解
      浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
      Stella981 Stella981
      3年前
      Django中Admin中的一些参数配置
      设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
      Wesley13 Wesley13
      3年前
      MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
      背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
      Python进阶者 Python进阶者
      10个月前
      Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
      大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这