jQuery插件Ztree后台获得json格式对象数组后直接在前台页面显示为什么没有以树形结构显示？ - ITeye问答
这是前台页面ztree配置，
&script type="text/javascript"&
&&&
var setting = {
&&&&&&& async: {
enable: true,
//contentType: "application/json",
url:"&%=contextPath%&/tree.do?cmd=getDeptTree",
//autoParam:["id", "name=n", "level=lv"],
//otherParam:{"otherParam":"zTreeAsyncTest"},
dataFilter: null
},
view:{
&&&&&&&&&&& dblClickExpand:false&&
& },
edit:{
&& drag:{
&&&& autoExpandTrigger: true,
&&&& prev: dropPrev,
inner: dropInner,
next: dropNext
&& },
&& enable:true
},
data:{
&&& simpleData:{
&&&&& enable: true,
&&&&&& idKey: "id",
&&&&&& pIdKey: "pId"
&&& }
& }
};
&& var zNodes =[];//树节点，json格式，异步加载可设置为null或[]
function setTrigger() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.setting.edit.drag.autoExpandTrigger = $("#callbackTrigger").attr("checked");
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting,zNodes);
$("#callbackTrigger").bind("change", {}, setTrigger);c
});
& &/script&
action层返回得数据是json对象数组，在前台页面直接显示，我想要的效果是已树形结构显示！
是不是包没引用或者&!DOCTYPE html没加，看一下原例子吧：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&HTML&
&HEAD&
& &TITLE& ZTREE DEMO &/TITLE&
& &meta http-equiv="content-type" content="text/ charset=UTF-8"&
& &link rel="stylesheet" href="demoStyle/demo.css" type="text/css"&
& &link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css"&
& &script type="text/javascript" src="api/apiCss/jquery-1.6.2.min.js"&&/script&
& &script type="text/javascript" src="api/apiCss/jquery.ztree.core-3.5.js"&&/script&
& &SCRIPT LANGUAGE="JavaScript"&
&& var zTreeO
&& // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
&& var setting = {};
&& // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
&& var zNodes = [
&& {name:"test1", open:true, children:[
&&&&& {name:"test1_1"}, {name:"test1_2"}]},
&& {name:"test2", open:true, children:[
&&&&& {name:"test2_1"}, {name:"test2_2"}]}
&& ];
&& $(document).ready(function(){
&&&&& zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
&& });
& &/SCRIPT&
&/HEAD&
&BODY&
&div&
&& &ul id="treeDemo" class="ztree"&&/ul&
&/div&
&/BODY&
&/HTML&
已解决问题
未解决问题&zTree 是一款依靠 jQuery 实现的多功能 "树插件",/v3/main.php#_zTreeInfo,功能强大,不多赘述.
下面我将介绍如何实现使用该插件生成HTML元素Dom树,并对其进行多样操作.
先贴上一个简单的HTML页面(直接拿的ztree的用的,画面简单实用,里面的文字内容不用在意)
1 &!DOCTYPE html&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&&/title&
&meta charset="utf-8" /&
&script src="../Scripts/jquery-2.2.4.min.js"&&/script&
&link href="http://localhost:83/Library/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" /&
&script src="http://localhost:83/Library/zTree_v3/js/jquery.ztree.all-3.5.min.js"&&/script&
<span style="color: #
&script src="../Scripts/tree.js"&&/script&
<span style="color: #
&style type="text/css"&
<span style="color: #
div#rMenu {
<span style="color: #
position: absolute;
<span style="color: #
visibility: hidden;
<span style="color: #
<span style="color: #
background-color: #555;
<span style="color: #
text-align: left;
<span style="color: #
padding: 2px;
<span style="color: #
<span style="color: #
<span style="color: #
div#rMenu ul {
<span style="color: #
margin: 0;
<span style="color: #
padding: 0;
<span style="color: #
border: 0;
<span style="color: #
outline: 0;
<span style="color: #
font-weight: inherit;
<span style="color: #
font-style: inherit;
<span style="color: #
font-size: 100%;
<span style="color: #
font-family: inherit;
<span style="color: #
vertical-align: baseline;
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
margin-top: 10px;
<span style="color: #
border: 1px solid #617775;
<span style="color: #
background: #f0f6e4;
<span style="color: #
width: 220px;
<span style="color: #
height: 360px;
<span style="color: #
overflow-y: scroll;
<span style="color: #
overflow-x: auto;
<span style="color: #
<span style="color: #
<span style="color: #
div#rMenu ul li {
<span style="color: #
margin: 1px 0;
<span style="color: #
padding: 0 5px;
<span style="color: #
cursor: pointer;
<span style="color: #
list-style: none outside none;
<span style="color: #
background-color: #DFDFDF;
<span style="color: #
<span style="color: #
<span style="color: # &/head&
<span style="color: # &body&
<span style="color: #
&div class="content_wrap"&
<span style="color: #
&div class="zTreeDemoBackground left" id="tree"&
<span style="color: #
&ul id="treeDemo" class="ztree"&&/ul&
<span style="color: #
<span style="color: #
<span style="color: #
&div class="example"&
<span style="color: #
&ul myid="1"&
<span style="color: #
&li myid="2"&
<span style="color: #
&h2 myid="3"&实现方法说明&/h2&
<span style="color: #
&ul myid="4"&
<span style="color: #
&li myid="5"&对于这种只有一个根节点，且不显示 +/- 开关的需求，需要利用 css、setting 配合使用&/li&
<span style="color: #
&li myid="6"&zTree v3.x 可以针对指定的 level，进行样式设定，请查看本页面源码，查看 css 设置&/li&
<span style="color: #
&li myid="7"&设置 setting.view.dblClickExpand 指向 Function，可以只针对根节点关闭双击展开的操作&/li&
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: # &/body&
<span style="color: # &/html&
2JS文件(仅生成dom树),需要用到递归
1 var zNodes = [], zTree, rMenu, $
2 function loopnodes(fathernode) {
var ret = [];
var children = $(fathernode).children();
children.each(function (i, em) {
var node = {
myid: $(em).attr('myid'),
name: $(em)[0].tagName + '|' + $(em).attr("myid"),
children: []
<span style="color: #
<span style="color: #
if ($(em).children().length & 0) {
<span style="color: #
node.children = loopnodes(em);
<span style="color: #
<span style="color: #
ret.push(node);
<span style="color: #
<span style="color: #
<span style="color: # }
<span style="color: # $(document).ready(function () {
<span style="color: #
$example = $(".example");
<span style="color: #
zNodes = loopnodes($example);
<span style="color: #
zTree = treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
<span style="color: # });
<span style="color: # var setting = {
<span style="color: #
<span style="color: #
showRemoveBtn: false,
<span style="color: #
showRenameBtn: false,
<span style="color: #
<span style="color: # };
&这样就可以把指定的区域的元素遍历到dom树上,再根据官方提供的Apl，可以对其进行一系列的操作.
例如(举个简单例子,对应API很容易实现),点击dom树上的节点,对应的页面元素发生变化
<span style="color: # var setting = {
<span style="color: #
<span style="color: #
showRemoveBtn: false,
<span style="color: #
showRenameBtn: false,
<span style="color: #
<span style="color: #
callback: {
<span style="color: #
onClick: zTreeOnClick,
<span style="color: #
<span style="color: # };
<span style="color: # function zTreeOnClick(event, treeId, treeNode) {
<span style="color: #
var myid = treeNode.
<span style="color: #
$example.find('[myid="' + myid + '"]').css('color', 'red');
<span style="color: #};
那么如何进行拖拽实现页面元素与dom树节点的变化了,首先,我们要明白ztree与位置变化相关的参数
先贴一个简单的拖拽代码
1 var setting = {
prev: true,
inner: true,
next: true,
isMove: true,
isCopy: true
<span style="color: #
enable: true,
<span style="color: #
showRemoveBtn: false,
<span style="color: #
showRenameBtn: false
<span style="color: #
<span style="color: #
callback: {
<span style="color: #
beforeDrag: beforeDrag,
<span style="color: #
beforeDrop: beforeDrop
<span style="color: #
<span style="color: # };
<span style="color: # function beforeDrag(treeId, treeNodes) {
<span style="color: #
return true;
<span style="color: # }
<span style="color: # function beforeDrop(treeId, treeNodes, targetNode, moveType) {
<span style="color: #
return true;
<span style="color: # }
我们需要需要关注的是beforeDrop,在拖拽落下的时候会传入的:
treeNodes:拖动的节点
targetNode:目标节点
moveType:拖动节点与目标节点的关系
我们确定拖动的节点所拖到的位置,就需要依靠moveType,它可能的值是
prev:&拖动节点在目标节点之前
inner: 拖动节点在目标节点之内
next:&拖动节点在目标节点之后关于目标节点,可以参考下面内容:
当你要把 C 拖拽到 A 和 B 之间 的时候， 如果仅仅要鼠标移动到 A和B 之间的空间内操作起来实属不易， 所以必然是在 B 的偏上位置 或 A 的偏下位置 即可认为是 &A、B之间， 并且这里面也有一些细微的区别：
在 A 偏下的时候， 你得到的 drop 的参数 target 是 A，moveType 是 next
在 B 偏下的时候， 你的道德 drop 的参数 target 是 B，moveType 是 prev
&有了这层关系,很容易就可以完成拖拽dom树,页面元素跟随变化
1 var setting = {
prev: true,
inner: true,
next: true,
isMove: true,
isCopy: true
<span style="color: #
enable: true,
<span style="color: #
showRemoveBtn: false,
<span style="color: #
showRenameBtn: false
<span style="color: #
<span style="color: #
callback: {
<span style="color: #
beforeDrag: beforeDrag,
<span style="color: #
beforeDrop: beforeDrop
<span style="color: #
<span style="color: # };
<span style="color: # function dropdrag(selectmyid, targetmyid, moveType) {
<span style="color: #
var currentelem = $example.find('[myid=' + selectmyid + ']');
<span style="color: #
var parentelem = $example.find('[myid=' + targetmyid + ']');
<span style="color: #
var content = currentelem.prop("outerHTML")
<span style="color: #
if (moveType == 'inner') {
<span style="color: #
parentelem.append(content);
<span style="color: #
currentelem.remove();
<span style="color: #
<span style="color: #
else if (moveType == "prev") {
<span style="color: #
parentelem.before(currentelem)
<span style="color: #
<span style="color: #
<span style="color: #
parentelem.after(currentelem)
<span style="color: #
<span style="color: # }
<span style="color: # function beforeDrag(treeId, treeNodes) {
<span style="color: #
return true;
<span style="color: # }
<span style="color: # function beforeDrop(treeId, treeNodes, targetNode, moveType) {
<span style="color: #
var selectmyid = treeNodes[0].myid,
<span style="color: #
targetmyid = targetNode.
<span style="color: #
dropdrag(selectmyid, targetmyid, moveType);
<span style="color: #
<span style="color: # }
阅读(...) 评论()openstack页面自定义插件使用详解（django、ajax、post）（zTree替例） - Go当前位置:& &&&openstack页面自定义插件使用详解（django、ajax、popenstack页面自定义插件使用详解（django、ajax、post）（zTree替例）&&网友分享于：&&浏览：0次openstack页面自定义插件使用详解（django、ajax、post）（zTree为例）
http://blog.csdn.net/tantexian/article/details/
http://blog.csdn.net/tantexian/article/details/
如有转载，请保留源作者博客信息。
Better Me的博客：blog.csdn.net/tantexian
如需交流，欢迎大家博客留言。
1、鉴于国内java开发人员比较多，java web方面的技术比较成熟。所以用python django(openstack)框架和java的strurs做个类比，让大家能够更直观的理解、更快的进入到开发中：
附图大致对比下，具体细节，自行查找相关资料：
2、接下来正式开始讲解，如何在openstack中使用自定义插件，本文以Jquery zTree树形插件为例。
第一步封装url地址，请求数据，在urls中自定义url：
为了方便后续大家复制代码，也顺带附上源代码
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类：
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 = []
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（浏览器直接访问）：
http://192.168.10.31/dashboard/admin/isolations/2a4fe5e733ec5a0fe4bfd/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获取数据：
先附上页面模板代码：
其中javascript要写在标签{% block modal-body %}中才能失效，具体的zTree的js导入本文使用了为压缩的方式，直接导入。
{# add by ttx #}
&link rel="stylesheet" href="{{ STATIC_URL }}dashboard/js/zTree/css/demo.css" type="text/css"&
&link rel="stylesheet" href="{{ STATIC_URL }}dashboard/js/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css"&
&script type="text/javascript" src="{{ STATIC_URL }}dashboard/js/zTree/js/jquery.ztree.core-3.5.js"&&/script&
&script type="text/javascript" src="{{ STATIC_URL }}dashboard/js/zTree/js/jquery.ztree.excheck-3.5.js"&&/script&
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 %}
&SCRIPT type="text/javascript"&
var setting = {
selectedMulti: false
enable: true
simpleData: {
enable: true
callback: {
beforeCheck: beforeCheck,
onCheck: onCheck
var code, log, className = "dark";
function beforeCheck(treeId, treeNode) {
className = (className === "dark" ? "":"dark");
showLog("[ "+getTime()+" beforeCheck ]&&&&" + treeNode.name );
return (treeNode.doCheck !== false);
function onCheck(e, treeId, treeNode) {
showLog("[ "+getTime()+" onCheck ]&&&&" + treeNode.name );
getAllChangeNodes()
function getAllChangeNodes() {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getChangeCheckedNodes();
$('#mytest').html(JSON.stringify(nodes));
var url = '/dashboard/admin/isolations/{{ tenant_id }}/set_tree';
var data={};
data["jsonTree"] = JSON.stringify(nodes);
jQuery.ajax({
type:"POST",
url : url,
data:data,
dataType : "json",
beforeSend: function(xhr, settings){
var csrftoken = $.cookie('csrftoken');
xhr.setRequestHeader("X-CSRFToken", csrftoken);
success : function(data) {
function showLog(str) {
if (!log) log = $("#log");
log.append("&li class='"+className+"'&"+str+"&/li&");
if(log.children("li").length & 6) {
log.get(0).removeChild(log.children("li")[0]);
function getTime() {
var now= new Date(),
h=now.getHours(),
m=now.getMinutes(),
s=now.getSeconds(),
ms=now.getMilliseconds();
return (h+":"+m+":"+s+ " " +ms);
function checkNode(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
type = e.data.type,
nodes = zTree.getSelectedNodes();
if (type.indexOf("All")&0 && nodes.length == 0) {
alert("请先选择一个节点");
if (type == "checkAllTrue") {
zTree.checkAllNodes(true);
} else if (type == "checkAllFalse") {
zTree.checkAllNodes(false);
var callbackFlag = $("#callbackTrigger").attr("checked");
for (var i=0, l=nodes. i&l; i++) {
if (type == "checkTrue") {
zTree.checkNode(nodes[i], true, false, callbackFlag);
} else if (type == "checkFalse") {
zTree.checkNode(nodes[i], false, false, callbackFlag);
} else if (type == "toggle") {
zTree.checkNode(nodes[i], null, false, callbackFlag);
}else if (type == "checkTruePS") {
zTree.checkNode(nodes[i], true, true, callbackFlag);
} else if (type == "checkFalsePS") {
zTree.checkNode(nodes[i], false, true, callbackFlag);
} else if (type == "togglePS") {
zTree.checkNode(nodes[i], null, true, callbackFlag);
function setAutoTrigger(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.setting.check.autoCheckTrigger = $("#autoCallbackTrigger").attr("checked");
$("#autoCheckTriggerValue").html(zTree.setting.check.autoCheckTrigger ? "true" : "false");
$(document).ready(function(){
var url = '/dashboard/admin/isolations/{{ tenant_id }}/get_tree_data';
type: "get",
async: false,
dataType: "json",
success: function (data) {
json = JSON.stringify(data);
host_tree_data = JSON.parse(json)
var zNodes =[
{ id:1, pId:0, name:"1", open:true},
{ id:11, pId:1, name:"1-1"},
{ id:12, pId:1, name:"1-2"},
{ id:111, pId:11, name:"1-1-1","checked":"true"},
{ id:112, pId:11, name:"1-1-2"},
$.fn.zTree.init($("#treeDemo"), setting, host_tree_data);
$("#checkTrue").bind("click", {type:"checkTrue"}, checkNode);
$("#checkFalse").bind("click", {type:"checkFalse"}, checkNode);
$("#toggle").bind("click", {type:"toggle"}, checkNode);
$("#checkTruePS").bind("click", {type:"checkTruePS"}, checkNode);
$("#checkFalsePS").bind("click", {type:"checkFalsePS"}, checkNode);
$("#togglePS").bind("click", {type:"togglePS"}, checkNode);
$("#checkAllTrue").bind("click", {type:"checkAllTrue"}, checkNode);
$("#checkAllFalse").bind("click", {type:"checkAllFalse"}, checkNode);
$("#autoCallbackTrigger").bind("change", {}, setAutoTrigger);
&h1&用 zTree 方法 勾选 checkbox&/h1&
&h6&[ 文件路径: excheck/checkbox_fun.html ]&/h6&
&div class="content_wrap"&
&div class="zTreeDemoBackground left"&
&ul id="treeDemo" class="ztree"&&/ul&
&ul class="info"&
&div id="mytest"&&/div&
&li class="title"&&h2&1、beforeCheck / onCheck 事件回调函数控制&/h2&
&ul class="list"&
&li&利用 beforeCheck / onCheck 事件回调函数 可以控制是否允许 更改 节点勾选状态，这里简单演示如何监控此事件&/li&
&li&&p&这里还演示了 checkNode / checkAllNodes 方法触发 beforeCheck / onCheck 事件回调函数的情况，试试看：&br/&
&&&&&input type="checkbox" id="autoCallbackTrigger" /& setting.check.autoCheckTrigger: &span id="autoCheckTriggerValue"&false&/span&&br/&
&&&&&input type="checkbox" id="callbackTrigger" checked /& 执行勾选方法是否触发 callback &br/&
&&&&单节点--[ &a id="checkTrue" href="#" title="不想勾选我就不勾选你..." onclick=""&勾选&/a& ]
&&&&[ &a id="checkFalse" href="#" title="不想取消勾选我就不取消你..." onclick=""&取消勾选&/a& ]
&&&&[ &a id="toggle" href="#" title="你想怎样？..." onclick=""&勾选 切换&/a& ]&br/&
&&&&单节点 ( 影响父子 )--[ &a id="checkTruePS" href="#" title="不想勾选我就不勾选你..." onclick=""&勾选&/a& ]
&&&&[ &a id="checkFalsePS" href="#" title="不想取消勾选我就不取消你..." onclick=""&取消勾选&/a& ]
&&&&[ &a id="togglePS" href="#" title="你想怎样？..." onclick=""&勾选 切换&/a& ]&br/&
&&&&全部节点--[ &a id="checkAllTrue" href="#" title="不管你有多NB，统统都要听我的！！" onclick=""&勾选&/a& ]
&&&&[ &a id="checkAllFalse" href="#" title="不管你有多NB，统统都要听我的！！" onclick=""&取消勾选&/a& ]&/p&
&li&&p&&span class="highlight_red"&使用 zTreeObj.checkNode / checkAllNodes 方法，详细请参见 API 文档中的相关内容&/span&&br/&
beforeCheck / onCheck log:&br/&
&ul id="log" class="log" style="height:130"&&/ul&&/p&
&li class="title"&&h2&2、setting 配置信息说明&/h2&
&ul class="list"&
&li&同 "checkbox 勾选操作" 中的说明&/li&
&li class="title"&&h2&3、treeNode 节点数据说明&/h2&
&ul class="list"&
&li&同 "checkbox 勾选操作" 中的说明&/li&
{% endblock %}
{% block modal-footer %}
&input class="btn btn-primary pull-right" type="submit" value="{% trans "Save" %}" /&
&a href="{% url 'horizon:admin:images:index' %}" class="btn secondary cancel close"&{% trans "Cancel" %}&/a&
{% endblock %}
跟多zTree使用，请自行参考zTree官网：www.ztree.me/
页面最终展示：
此处的zTree页面比较丑，可以修改css样式，调整，附上bootstrap风格的树形插件样式。http://www./jscode/nav/nav23/
到此通过ajax获取数据到页面展示讲解完毕。
6、讲完ajax从后台获取数据到前台接下来讲解，如何通过ajax，把页面的数据传递给后台处理：
附上代码：
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：
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：
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")
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 1234567891011 Copyright & &&版权所有