一、在提前加载js的地方写一段js,判断该页面是否需要添加ztree,我的项目所有提前加载的js都写在admin.js中
//增加ztree
$(document).ready(function() {
var t = $('#tree-style').text();
if(t.length>0){
$('#col').addClass('sevice-table-container');
}
});
二、修改要显示ztree的html页面
{% extends 'layouts/admin_table_view.html' %}
//// 在admin_table_view.html中添加{% block tree %},在当前页面的{% block tree %}中加一个div,class要指明为ztree,他的样式来自于
zTreeStyle.css///
{% block tree %}
<div id="tree-style" class="ztree-style">
<ul id="Servicetree" class="ztree"></ul>
</div>
{% endblock %}
/////
{% block table_title %}
<h2>服务列表 <a type="button" href="{{url_for('admin.new_service_view')}}"class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增服务
</a></h2>
{% endblock%} {% block table_header%}
<th>服务名称</th>
<th>服务管理员</th>
<th>服务等级</th>
<th>父级服务</th>
<th>上线时间</th>
<th>下线时间</th>
<th>操作</th>
{% endblock%} {% block table_scripts %}
<script>
var table_obj = {
"ajax":"{{url_for('api.get_services')}}",
"columns":[
{"data":"service_name"},
{"data":"manager"},
{"data":"service_level"},
{"data":"parent_service_id"},
{"data":null},
{"data":null},
{"data":null}
],
"columnDefs":[
{
"targets": -3,
"data": null,
"render": function ( data, type, full, meta ) {
var d = new Date(data.online_date)
return moment.utc(d).format('YYYY-MM-DD');
}
},
{
"targets": -2,
"data": null,
"render": function ( data, type, full, meta ) {
var d = data.offline_date
if (d == null)
{return ''}
else
{ d = new Date(d)
return moment.utc(d).format('YYYY-MM-DD');}
}
},
{
"targets": -1,
"data": null,
"render": function ( data, type, full, meta ) {
return '<a id="aburl" href="'+data.view_url+'" class="btn btn-sm btn-info item-detail" data-id='
+data.id
+'>修改</a> <button class="btn btn-sm btn-danger item-remove" data-id='
+data.id
+'>删除</button>';
}
}]
};
</script>
{% endblock%} ///在admin_table_view.html中添加{% block tree_scripts %},在当前页面的{% block tree_scripts %}中加一个js scripts,
另外,ztree使用的自带核心js是jquery.ztree.core.js,同时它依赖官方jquery>1.5版本,使用时先引入jquery
{% block tree_scripts %}
<script>
var zTreeObj;
// zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
var setting = {
data: {
simpleData: {
enable: true,
idKey: "id", //节点id
pIdKey: "pId",//父id
rootPId: 0 //根id,一般为0即可
}
},
async: {
enable: true,
contentType: "application/json",
url: "{{url_for('api.generate_tree')}}", //获取数据的接口
autoParam: ["id", "name"], //根据id,name来获取数据
type:"get" //从接口获取数据的方式
}
}; $(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#Servicetree"), setting);
});
</script>
{% endblock %} 三、叶子节点的图标样式zTreeStyle.css 父节点打开.ztree li span.button.ico_open{margin-right:2px; vertical-align:top; *vertical-align:middle;background:url(../images/img/open-folder-16.png) no-repeat scroll 0 0 transparent;}
父节点关闭.ztree li span.button.ico_close{margin-right:2px; vertical-align:top; *vertical-align:middle;background:url(../images/img/close-folder.png) no-repeat scroll 0 0 transparent;}
叶子节点.ztree li span.button.ico_docu{margin-right:2px; vertical-align:top; *vertical-align:middle;background:url(../images/img/layer_16px.png) no-repeat scroll 0 0 transparent;} 四、接口生成需要的数据,必须是json格式
@api.route('/services_tree/', methods=['GET'])
@token_authorize
def generate_tree():
#返回服务树的函数
services_tree = Services.query.all()
zNodes = [d.tree_to_json() for d in services_tree]
zNodes.append({"id": "-1", "pId": "0", "name": "服务", "open": "True"}) #添加根节点显示的内容,根节点id设为-1,根节点没有父id,顾令其父id为0
return jsonify(zNodes) 五、model获取每条相应数据
def tree_to_json(self):
"""返回服务树的相关数据"""
service_post = {
'id': self.id,
'pId': self.parent_service_id or '-1', #如果不存在父id,则令父id为-1
'name': self.service_name,
'url': url_for('admin.get_service_view', id=self.id, _external=True) #注意这里的字段名为ztree规定好的字段名
}
return service_post

ztree使用方法 python后台的更多相关文章

  1. DWZ 框架remote 验证字段唯一性方法提交后台,如果是中文会显示成乱码问题

    关于jquery  remote 验证字段唯一性方法提交后台,如果是中文会显示成乱码问题.可以直接修改tomcat 配置文件server.xml  设置 URIEncoding=utf-8属性,将ge ...

  2. jQuery AJAX 方法 success()后台传来的4种数据

    JAVA中的四种JSON解析方式详解 jQuery AJAX 方法 success()后台传来的4种数据 1.后台返回一个页面 js代码 /**(1)用$("#content-wrapper ...

  3. AJAX 与 Python 后台通信

    Ajax 简介 Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术. Ajax = 异步 ...

  4. python的str,unicode对象的encode和decode方法, Python中字符编码的总结和对比bytes和str

    python_2.x_unicode_to_str.py a = u"中文字符"; a.encode("GBK"); #打印: '\xd6\xd0\xce\xc ...

  5. Python后台开发Django(数据库)

    如果使用pymysql,则可以在view中直接import pymysql进行操作,与原操作无区别 Django数据库框架支持 sqlite3, MySQL, PostgreSQL等数据库,只需要在s ...

  6. Python后台开发Django(启动)

    Django版本为:2.1.7 Python的web框架,MTV思想 MVC Model(模板文件,数据库操作)  view(视图模板文件  )controller(业务处理) MTV Model(模 ...

  7. 转 zabbix 优化方法 以及 后台数据库查询方法 两则

    ############sample 1 https://blog.51cto.com/sfzhang88/1558254 如何从Zabbix数据库中获取监控数据 sfzhang关注6人评论40627 ...

  8. 矩阵或多维数组两种常用实现方法 - python

    在python中,实现多维数组或矩阵,有两种常用方法: 内置列表方法和numpy 科学计算包方法. 下面以创建10*10矩阵或多维数组为例,并初始化为0,程序如下: # Method 1: list ...

  9. 实现LRU的两种方法---python实现

    这也是豆瓣2016年的一道笔试题... 参考:http://www.3lian.com/edu/2015/06-25/224322.html LRU(least recently used)就不做过多 ...

随机推荐

  1. 分享我访问google的方法

    对于程序员来说,有很多技术问题还是通过互联网搜索来解决的.所以百度.google对于我们是多少的重要.但是GOOGLE现在无法访问了.怎么办呢.以下是我访问google的方法. 首先自己制作了一个简单 ...

  2. go的Type switch是一个switch语句么?

    相信这样的语句在go中大家见的很多 switch t := arg.(type) { default: fmt.Printf("unexpected type %T\n", t) ...

  3. Ajax GET

    $ajax的post请求提交方式: Controller: @RequestMapping("/emps") @ResponseBody public Msg getEmps(@R ...

  4. 【leetcode 144. 二叉树的前序遍历】解题报告

    前往二叉树的:前序,中序,后序 遍历算法 方法一:递归 vector<int> res; vector<int> preorderTraversal(TreeNode* roo ...

  5. C#质因子(自己别扭的逻辑。。)

    static int length1(int num) //想着要定义一个函数取,质因子数组的长度 { ; ; i <= num; i++) //for循环中I 不会归零 只能遍历一次 { if ...

  6. 842. Split Array into Fibonacci Sequence

    Given a string S of digits, such as S = "123456579", we can split it into a Fibonacci-like ...

  7. python3好用的requests库

    python3好用的requests库 requests是什么? requests是基于urllib编写的http库,支持python3,比urllib更好用,更简单.之前使用python写一些htt ...

  8. windows 2003 远程桌面无法使用剪贴板共享纯文本的解决方法(亲测可用)

    远程桌面无法使用剪贴板共享纯文本的解决方法========================================以下操作须在远程桌面上操作,本地机没用的!================== ...

  9. OC - runtime 之关联对象

    header{font-size:1em;padding-top:1.5em;padding-bottom:1.5em} .markdown-body{overflow:hidden} .markdo ...

  10. 基于openstack搭建百万级并发负载均衡器的解决方案

    最近,喜欢研究一些国外技术大咖们的文章,而这篇文章是基于openstack负载均衡器的解决方案,做的一些总结~希望能够给小伙伴带来一些灵感或者帮助. openstack现有的负载均衡解决方案,无论是l ...