EasyUI TreeGrid 在Django中的使用，构建树形表格

于 2024-05-30 17:43:11 发布
阅读量392 收藏 5
点赞数 4
文章标签： easyui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44714317/article/details/139328132
版权

效果图如下：

基础环境介绍：

        python3.8.6、Django4.1，Win10，pycharm2020.1.5

首先去EasyUI官网下载免费版，拿到框架基础JS及CSS文件。Jquery EasyUI下载

        按照官网给的前端源代码，按照JSS和CSS文件路径在官网下载的文件夹中找到对应的资源放到自己的代码中去。

官网给出了TreeGrid的数据格式样例在treegrid_data1.json中

        仿照官网给出的数据格式，我们传到前端数据也需要进行格式转换。由于我们在Python后端中常用的数据结构为列表或字典，下面我以列表为源数据进行转换为例。

源数据：

list_data = [
    {"id": 1,
     "name": "C",
     "size": "",
     "date": "02/19/2010",
     "parent_id": None
     },
    {
        "id": 2,
        "name": "Program Files",
        "size": "120 MB",
        "date": "03/20/2010",
        "parent_id": 1
    },
    {

        "id": 21,
        "name": "Java",
        "size": "",
        "date": "01/13/2010",
        "parent_id": 2
    },
    {
        "id": 211,
        "name": "java.exe",
        "size": "142 KB",
        "date": "01/13/2010",
        "parent_id": 21
    },
    {
        "id": 212,
        "name": "jawt.dll",
        "size": "5 KB",
        "date": "01/13/2010",
        "parent_id": 21
    },
    {
        "id": 22,
        "name": "MySQL",
        "size": "",
        "date": "01/13/2010",
        "parent_id": 2
    },
    {
        "id": 221,
        "name": "my.ini",
        "size": "10 KB",
        "date": "02/26/2009",
        "parent_id": 22
    }, {
        "id": 222,
        "name": "my-huge.ini",
        "size": "5 KB",
        "date": "02/26/2009",
        "parent_id": 22
    }, {
        "id": 223,
        "name": "my-large.ini",
        "size": "5 KB",
        "date": "02/26/2009",
        "parent_id": 22
    },
    {
        "id": 3,
        "name": "eclipse",
        "size": "",
        "date": "01/20/2010",
        "parent_id": 1
    },
    {
        "id": 31,
        "name": "eclipse.exe",
        "size": "56 KB",
        "date": "05/19/2009",
        "parent_id": 3
    }, {
        "id": 32,
        "name": "eclipse.ini",
        "size": "1 KB",
        "date": "04/20/2010",
        "parent_id": 3
    }, {
        "id": 33,
        "name": "notice.html",
        "size": "7 KB",
        "date": "03/17/2005",
        "parent_id": 3
    }
]

转换方法：

def list_to_tree(data, parent_id=None):
    """将列表数据转换为树形结构"""
    tree = []
    for item in data:
        if item.get('parent_id') == parent_id:
            children = list_to_tree(data, item['id'])
            if children:
                item['children'] = children
                # 下面是在每个子节点中，加入该元素，TreeGrid会将数据初始状态设置为折叠的
                item.update({"state": "closed"})
            tree.append(item)
    return tree

转换后的结果：

[
  {
    "id": 1,
    "name": "C",
    "size": "",
    "date": "02/19/2010",
    "parent_id": null,
    "children": [
      {
        "id": 2,
        "name": "Program Files",
        "size": "120 MB",
        "date": "03/20/2010",
        "parent_id": 1,
        "children": [
          {
            "id": 21,
            "name": "Java",
            "size": "",
            "date": "01/13/2010",
            "parent_id": 2,
            "children": [
              {
                "id": 211,
                "name": "java.exe",
                "size": "142 KB",
                "date": "01/13/2010",
                "parent_id": 21
              },
              {
                "id": 212,
                "name": "jawt.dll",
                "size": "5 KB",
                "date": "01/13/2010",
                "parent_id": 21
              }
            ],
            "state": "closed"
          },
          {
            "id": 22,
            "name": "MySQL",
            "size": "",
            "date": "01/13/2010",
            "parent_id": 2,
            "children": [
              {
                "id": 221,
                "name": "my.ini",
                "size": "10 KB",
                "date": "02/26/2009",
                "parent_id": 22
              },
              {
                "id": 222,
                "name": "my-huge.ini",
                "size": "5 KB",
                "date": "02/26/2009",
                "parent_id": 22
              },
              {
                "id": 223,
                "name": "my-large.ini",
                "size": "5 KB",
                "date": "02/26/2009",
                "parent_id": 22
              }
            ],
            "state": "closed"
          }
        ],
        "state": "closed"
      },
      {
        "id": 3,
        "name": "eclipse",
        "size": "",
        "date": "01/20/2010",
        "parent_id": 1,
        "children": [
          {
            "id": 31,
            "name": "eclipse.exe",
            "size": "56 KB",
            "date": "05/19/2009",
            "parent_id": 3
          },
          {
            "id": 32,
            "name": "eclipse.ini",
            "size": "1 KB",
            "date": "04/20/2010",
            "parent_id": 3
          },
          {
            "id": 33,
            "name": "notice.html",
            "size": "7 KB",
            "date": "03/17/2005",
            "parent_id": 3
          }
        ],
        "state": "closed"
      }
    ],
    "state": "closed"
  }
]

再直接将结果返回给前端就完美解决了。

下面是前后端完整代码

前端代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic TreeGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../static/CSDN_GridTree/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../static/CSDN_GridTree/icon.css">
	<link rel="stylesheet" type="text/css" href="../../static/CSDN_GridTree/demo.css">
	<script type="text/javascript" src="../../static/CSDN_GridTree/jquery.min.js"></script>
	<script type="text/javascript" src="../../static/CSDN_GridTree/jquery.easyui.min.js"></script>
</head>
<body>
	<div style="margin:20px 0;"></div>
	<table title="Folder Browser" class="easyui-treegrid" style="width:700px;height:250px"
			data-options="
                {#	下面放入自己返回数据的Url地址  #}
				url: '/CSDN_GridTree/data/',
				method: 'get',
				rownumbers: true,
				idField: 'id',
				treeField: 'name',
				fit:true,
			">
		<thead>
			<tr>
				<th data-options="field:'name'" width="220">Name</th>
				<th data-options="field:'size'" width="100" align="right">Size</th>
				<th data-options="field:'date'" width="150">Modified Date</th>
			</tr>
		</thead>
	</table>

</body>
</html>

后端代码：

import json

from django.http import JsonResponse
from django.shortcuts import render

list_data = [
    {"id": 1,
     "name": "C",
     "size": "",
     "date": "02/19/2010",
     "parent_id": None
     },
    {
        "id": 2,
        "name": "Program Files",
        "size": "120 MB",
        "date": "03/20/2010",
        "parent_id": 1
    },
    {

        "id": 21,
        "name": "Java",
        "size": "",
        "date": "01/13/2010",
        "parent_id": 2
    },
    {
        "id": 211,
        "name": "java.exe",
        "size": "142 KB",
        "date": "01/13/2010",
        "parent_id": 21
    },
    {
        "id": 212,
        "name": "jawt.dll",
        "size": "5 KB",
        "date": "01/13/2010",
        "parent_id": 21
    },
    {
        "id": 22,
        "name": "MySQL",
        "size": "",
        "date": "01/13/2010",
        "parent_id": 2
    },
    {
        "id": 221,
        "name": "my.ini",
        "size": "10 KB",
        "date": "02/26/2009",
        "parent_id": 22
    }, {
        "id": 222,
        "name": "my-huge.ini",
        "size": "5 KB",
        "date": "02/26/2009",
        "parent_id": 22
    }, {
        "id": 223,
        "name": "my-large.ini",
        "size": "5 KB",
        "date": "02/26/2009",
        "parent_id": 22
    },
    {
        "id": 3,
        "name": "eclipse",
        "size": "",
        "date": "01/20/2010",
        "parent_id": 1
    },
    {
        "id": 31,
        "name": "eclipse.exe",
        "size": "56 KB",
        "date": "05/19/2009",
        "parent_id": 3
    }, {
        "id": 32,
        "name": "eclipse.ini",
        "size": "1 KB",
        "date": "04/20/2010",
        "parent_id": 3
    }, {
        "id": 33,
        "name": "notice.html",
        "size": "7 KB",
        "date": "03/17/2005",
        "parent_id": 3
    }
]


def list_to_tree(data, parent_id=None):
    """将列表数据转换为树形结构"""
    tree = []
    for item in data:
        if item.get('parent_id') == parent_id:
            children = list_to_tree(data, item['id'])
            if children:
                item['children'] = children
                # 下面是在每个子节点中，加入该元素，TreeGrid会将数据初始状态设置为折叠的
                item.update({"state": "closed"})
            tree.append(item)
    return tree


# 跳转到前端页面
def CSDN_GridTree_list(request):
    return render(request, 'CSDN_Tree.html')


# 返回树形数据结果
def CSDN_GridTree(request):
    tree_data = list_to_tree(list_data)
    return JsonResponse(tree_data,safe=False)

需要注意的事项：

        1、必须要有根节点，且根节点的父节点处应为空

        2、一条数据不能对应多条父级，因此要注意每条数据的id最好是唯一的。（这里有些业务场景可能会需要这个功能，后续找到合适的处理方式再来完善）

中国坏学霸
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
TreeGrid分页树形表格
weixin_30311605的博客
08-16 1966
先展示效果图： 加载treegrid的json数据格式有两种： （1）基本的数据结构 [{ "id":1, "name":"C", "size":"", "date":"02/19/2010", "children":[{ "id":2, "name":"Program Files",...
Java easyui树形表格TreeGrid的实现代码
08-31
今天，我们将详细介绍如何使用 Java EasyUI 实现一个树形表格 TreeGrid 的代码。 TreeGrid 组件的基本概念 在 EasyUI 中，TreeGrid 组件是一个特殊的数据网格控件，它可以用来展示树形结构的数据。TreeGrid 组件由...
datagridview单元格添加树控件.
08-28
datagridview单元格添加树控件
【EasyUI】基本树形表格TreeGrid踩坑指南
習習君的博客
05-04 2929
最近做公司的一个ssh项目，web层用的是easyui和freemarker写的。最近做一个行政区划树形组件，遇到了许多坑，在此记录一下。其中包含：获取当前树组件层级、树组件的属性、树组件的事件和方法等等。
树形表格TreeGrid
梦想起飞的地方.........
04-16 1419
树形表格TreeGrid 展开 1.效果截图 2.数据结构 [{"mcode":"UI","mname":"页面开发模板","micon":"glyphicon glyphicon-th","murl":"","explains":"开发页面的常用组件和页面","parent":null,"sort":4, "children":[ {"mcode":"Css...
easyui中最新版本的TreeGrid同步树形表格、同步加异步树形表格、树形表格分页且异步查看子节点
那一刻，那一夜，那一月，那一年，那一世
01-13 6345
easyui中最新版本的TreeGrid同步树形表格、同步加异步树形表格、树形表格分页且异步查看子节点
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
10-28
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍，需要的朋友可以参考下。
JAVA实现EASYUI树形表格（TreeGrid）代码
11-27
JAVA实现EASYUI树形表格（TreeGrid）代码，gradle项目，内含gradle文件夹和mysql数据库文件，解压后导入mysql数据库，文件夹导入eclipse即可使用。首次使用请更新gradle项目下载JAR包，不然报错。
jQuery EasyUI API 中文文档 – TreeGrid 树表格使用介绍
01-19
扩展自 $.fn.datagrid.defaults，用 $.fn.treegrid.defaults 重写了 defaults。 依赖 datagrid 用法 代码如下: ”tt”></table> 代码如下: $(‘#tt’).treegrid({ url:’treegrid_data.json’, treeField:’name’, ...
解决 easyui treegrid 批量展开和关闭卡顿问题。
05-09
当TreeGrid数据量过大的时候 使用 $('#tg').treegrid('collapseAll'); 和 $('#tg').treegrid('expandAll');会造成严重卡顿， 解决方案： 数据增加属性 state：closed， 即可默认收起，反之展开，需再展开时，将加载...
Django引用ztree实现数据库表导入树状目录
06-18
python3.7下Django2.2引用ztree插件从mysql数据库导入数据表来实现树形态目录。
bootstrap-treegrid实现树形表格.zip
07-24
bootstrap-treegrid实现树形表格.zip
jquery-treegrid树状表格的使用（.Net平台）
weixin_30576827的博客
12-31 172
上一篇介绍了DataTable，这一篇在DT的基础之上再使用jquery的一款插件：treegrid,官网地址：http://maxazan.github.io/jquery-treegrid/ 一、使用treegrid，需要以下支持 jquery.min.js+jquery.treegrid.min.js 二、后端提供树状列表格式的集合数据，借助前端的DT的配置控制，来在页面上输出满足tr...
vue使用树形表格vue-table-width-tree-grid的用法
2301_76232361的博客
04-13 228
{{ scope.row }}编辑。2.在main.js中使用。
DataGrid的牵套，实现树型结构.
Asp.net2.0开发专栏
07-16 2283
DataGridMasterForm 使用DataGrid控件实现以主细表显示数据 根目录： DataKeyField="Id" BorderCol
django+vue3+el-tree树形组件菜单
weixin_62935305的博客
05-28 2760
django+vue3+el-tree树形 1.分析django 中所需要的表 2.django 中主要实现的业务逻辑 3.vue3中使用elementUI配置 4.vue3使用el-tree的布局 5.el-tree上附加的功能
推荐开源项目：jQuery TreeGrid - 灵活强大的表格树视图插件
最新发布
gitblog_00068的博客
04-16 393
推荐开源项目：jQuery TreeGrid - 灵活强大的表格树视图插件 项目地址:https://gitcode.com/maxazan/jquery-treegrid 项目简介 jQuery TreeGrid 是一个基于 jQuery 的开源插件，它将普通的 HTML 表格转换为可折叠、层次分明的树状视图。这个项目提供了丰富的自定义选项和简洁的 API，使得在网页中构建和展示复杂的数据结构变...
django 实现：闭包表—树状结构
weixin_44777680的博客
09-25 635
闭包表（Closure Table）是一种通过空间换时间的模型，它是用一个专门的关系表（其实这也是我们推荐的 归一化方式）来记录树上节点之间的层级关系以及距离。实现一个文件树，文件夹直接可以实现无限嵌套。
easyui treegrid 怎么给树形增加序号
06-06
可以使用easyui treegrid自带的formatter函数实现给树形增加序号的功能。具体实现如下： 1.在columns中添加一列，用于展示序号，例如： ``` {field:'id',title:'序号',width:50,formatter:function(value,row,index){return index+1;}} ``` 2.在treegrid的onLoadSuccess事件中，对每一行的序号进行重新赋值，例如： ``` onLoadSuccess:function(data){ var treegrid = $(this); var roots = treegrid.treegrid('getRoots'); for(var i=0;i<roots.length;i++){ var node = roots[i]; resetIndex(node); } function resetIndex(node){ var children = treegrid.treegrid('getChildren',node.id); if(children.length>0){ for(var i=0;i<children.length;i++){ var child = children[i]; var index = treegrid.treegrid('getRowIndex',child); treegrid.treegrid('update',{ id:child.id, row:{id:index+1} }); resetIndex(child); } } } } ``` 这样，就可以给easyui treegrid增加序号了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值