使用mptt在easyui中显示树形结构
# Django MPTT easyui
## 测试指令
按照MPTT的文档,先创建模型,然后添加数据
from django.db import models
from mptt.models import MPTTModel, TreeForeignKey
class Genre(MPTTModel):
name = models.CharField(max_length=50, unique=True)
parent = TreeForeignKey('self', null=True, blank=True, related_name='children', db_index=True)
#class MPTTMeta:
# order_insertion_by = ['name']
注意把order_insertion_by 这里删除。因为在转json输出的时候,按照mptt的lft,id这两个排序。
先清空数据库
from myapp.models import Genre
Genre.objects.all().delete()
创建树节点
from myapp.models import Genre
rock = Genre.objects.create(name="Rock")
blues = Genre.objects.create(name="Blues")
hr = Genre.objects.create(name="Hard Rock", parent=rock)
pr = Genre.objects.create(name="Pop Rock", parent=rock)
Genre.objects.create(name="Hard Rock1", parent=hr)
Genre.objects.create(name="Hard Rock3", parent=hr)
Genre.objects.create(name="Hard Rock2", parent=hr)
## 直接显示mptt
def show_genres(request):
nodes = Genre.objects.all()
#print(nodes)
return render_to_response('genres.html', {'nodes': nodes})
## mptt转json
[fastest way to create JSON to reflect a tree structure in Python / Django using mptt](http://stackoverflow.com/questions/12556268/fastest-way-to-create-json-to-reflect-a-tree-structure-in-python-django-using/12556693)
按照stackflow上的做法,为了快速输出,需要mptt和cache相关的api。然而我这里并不需要快速,额外的要求是输出的顺序,即插入顺序。
def recursive_node_to_dict(node):
result = {
'name': node.name, 'id': node.pk,
#notice the use of node._cached_children instead of node.get_children()
'children' : [recursive_node_to_dict(c) for c in node.get_children().order_by('lft', 'id')]
}
return result
def mptt_json(subTrees):
subRootDicts = []
for subTree in subTrees:
subTree = recursive_node_to_dict(subTree)
subRootDicts.append(subTree)
jsonTree = json.dumps(subRootDicts, indent=4)
print(jsonTree)
# optional clean up, remove the [ ] at the beginning and the end, its needed for D3.js
# jsonTree = jsonTree[1:len(jsonTree)]
# jsonTree = jsonTree[:len(jsonTree)-1]
return jsonTree
def get_tree(request):
rootM = Genre.objects.order_by('lft', 'id').filter(level=0)
json_data = mptt_json(rootM)
# print(json_data)
return HttpResponse(json_data,content_type="application/json")
## easyui加载mptt的数据
<table id="tg" class="easyui-treegrid" title="TreeGrid ContextMenu" style="width:700px;height:250px"
data-options="
iconCls: 'icon-ok',
rownumbers: true,
animate: true,
collapsible: true,
fitColumns: true,
url: '/demo/get_tree/',
method: 'get',
idField: 'id',
treeField: 'name'
">
<thead>
<tr>
<th data-options="field:'name',width:180">Task Name</th>
</tr>
</thead>
</table>
转载于:https://www.cnblogs.com/panpeter/p/6400286.html
使用mptt在easyui中显示树形结构相关推荐
- Winform中实现向窗体中拖放照片并显示以及拖放文件夹显示树形结构(附代码下载)
场景 向窗体中拖拽照片并显示效果 向窗体中拖拽文件夹并显示树形结构效果 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 ...
- ztree和php结合实例,实例详解jQuery EasyUI结合zTree树形结构制作web页面
JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的,z ...
- Excel表格中建立树形结构
Excel表格中建立树形结构 2010-04-05 17:56:37| 分类: 开发笔记 |字号 订阅 有时在excel表格中需要建立树形结构,如下图所示. 对动物.植物进行分类. 动物.植物类中分 ...
- EasyUI之Tree树形结构(一)
官网地址:www.jeasyui.net/plugins/186- 前端代码: $("#menuTreegrid").treegrid({url: SysResource.URL. ...
- 把数据转换为在内存中Tree(树形结构)。_备战秋招:一文搞定数据库常见面试题...
点击上方"蓝字",关注了解更多 1.数据库范式 第一范式:列不可分,eg:[联系人](姓名,性别,电话),一个联系人有家庭电话和公司电话,那么这种表结构设计就没有达到 1NF: 第 ...
- word文档中显示目录结构、插入目录
要使word中左侧显示目录结构,选择菜单栏"视图"--"文档结构图". 如果没有找到"文档结构图",可以自定义添加后重新上述操作. 要插入目 ...
- Flex4 在advanceddatagrid组件中以“树形结构”显示数据
2019独角兽企业重金招聘Python工程师标准>>> flex前台页面: <?xml version="1.0" encoding="utf-8 ...
- java中dom树形结构_DOM树的结构
转载于:http://hi.baidu.com/leexper/blog/item/1c47f1112c1d3676ca80c4a9.html 一.引言 XML 是eXtensible Markup ...
- 把数据转换为在内存中Tree(树形结构)。_Linux的中断处理机制 [二] - 数据结构(2)...
Linux的中断处理机制 [一] - 数据结构(1) 上文提到,每个IRQ同时有"irq"和"hwirq"两个编号.这里"hwirq"是硬件 ...
- 在vue项目中使用树形结构的穿梭框
先看一下最后的效果: 一个基于elementui的穿梭框组件:el-tree-transfer 第一步:安装组件 npm install el-tree-transfer --save 第二步:写代码 ...
最新文章
- EntityFramework:状态变化与方法的关系
- 数据结构和算法:全面的算法代码库
- TCPIP / MTU 和 MSS 的区别和联系
- 【期望】期望收益(金牌导航 期望-3)
- 微信小程序登录 更新中
- windows下手动配置ipv6地址
- 配置实体框架DbContext的可扩展方案
- linux 错误信息 输出到管道,linux grep通过管道输出到head出现write error: Broken pipe错误...
- JSK-383 是否闰年(课后)【入门】
- 【C语言】头文件书写方法与规范、code::black中如何创建并编写头文件(一看就会)
- 办公小技巧:excel删除重复项
- 基于xlsx-populate实现的前端埋点导出
- 【037】PhotoMosh–艺术故障图片在线生成器
- 全新解密域名防红系统源码,支持分站
- 使用Google语音识别引擎(Google Speech API)
- 动态规划统计正方形子矩阵
- 对计算的理解计算机科学导论论文,计算机科学导论论文
- 中序和先序、中序和后序
- 瘦客户机、Windows终端和NC的差别
- 抖音上的时钟屏保,被我改造完用来表白
热门文章
- 数据分享 | 高光谱遥感影像数据集汇总
- Python 读取/存储 yaml 文件
- ValueError: Object arrays cannot be loaded when allow_pickle=False 报错解决
- Linux 命令之——文件行数查询命令温习
- 使用Robomongo 连接MongoDB 3.x 报 Authorization failed 解决办法(转)
- mysql算大型数据库吗_mysql – 估计大型数据库的大小和速度
- chrome 模拟点击_详解爬虫模拟登陆的三种方法
- 复选框选中的值怎么传到mysql_PHP中如何将复选框选中的内容提交到mysql的一个字段中...
- Java 中isEmpty和null、 的区别
- JavaSE基础——代码块、继承、方法重写和final关键字