jQuery 树的简单的渲染（前端和后端的代码实现）

最新推荐文章于 2022-02-08 14:28:28 发布
最新推荐文章于 2022-02-08 14:28:28 发布
阅读量498 收藏 1
点赞数
文章标签： springmvc javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MissWTking/article/details/117514984
版权
本文介绍了如何在后端使用Spring MVC和前端使用jQuery的ZTree库来实现树形结构的渲染。首先，定义了ZTree的实体类，通过节点ID和父节点ID构建树结构。接着，详细阐述了从Mapper到Controller的数据查询和处理流程。在前端，引入ZTree的JS库，创建存放树的容器，并配置实例化参数，实现了树的显示。提供的Setting参数仅供参考，实际使用时需按需求调整。页面显示部分展示了ZTree节点图标的设置，适合初学者参考。
摘要由CSDN通过智能技术生成

 

后端:

1.通过ZTree来实现一个简单的树的渲染首先要先建立一个Ztree实体类，如下

 

 

 

 

 

 

 

 

 

 

树的渲染主要是通过一个节点Id和一个节点父Id来进行树的显现

2.Mapper层:

查询需要所渲染树的数据集合

3.Service层和Service实现层:

Sevice层:

实现层:

4.数据库字段:region_id 区域Id ,parent_id 父级Id 

ancestors:祖级 因为我这做的是三级分类

5.Controller层:

最低0.47元/天 解锁文章
MissWTking
关注
关于前端和后端：说一说前端路由与后端路由的区别
m0_73533108的博客
09-06 1452
关于前端和后端：说一说前端路由与后端路由的区别
html前端动态获取后端数据显示到表格，实现分页显示
04-14
html前端获取后端js的数据，实现到html表格，并且实现表格分页显示，分页显示原理是要显示那一页数据就从后端获取需要显示页的数据，不会一次性获取全部数据，减小流前端的压力。后端使用js+express，读取csv文件...
jQuery树形结构机构树菜单特效代码
03-20
jQuery树形结构机构树菜单代码是一款在网页设计中必不可少的tree树形结构，尤其是在后台管理模板。
jQuery：ztree树结构插件具体应用(根据数据渲染树形结构)
蜗牛小前的博客
05-29 1360
var roleStr = '' //点击配置树形结构弹框事件 tableData.peizhi = function(data){ layer.open({ type: 1, title: '角色管理', content: $('#ztree'), area: ['60%', '500px'], succe...
Jquery-zTree的基本用法
上善若水任方圆
05-05 700
【简介】 zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件  兼容 IE、FireFox、Chrome 等浏览器  在一个页面内可同时生成多个 Tree 实例  支持 JSON 数据  支持一次性静态生成 和 Ajax 异步加载 两种方式  支持多种事件响应及反馈  支持 Tree 的节点移动、编辑、删除  支持任意更换皮肤 ...
zTree 优秀的jquery树插件
weixin_39037804的博客
10-17 116
zTree 优秀的jquery树插件,文档详细，渲染快 使用方法： 1、引用zTree的js和css文件　　 <link href="~/Content/zTree_v3/css/zTreeStyle...
JQuery-zTree.js使用范例
weixin_34067102的博客
09-19 469
2019独角兽企业重金招聘Python工程师标准>>> ...
用thinkphp开发的新闻发布系统，从前端到后端，全部源码！
07-19
通过阅读和学习源码，可以深入了解ThinkPHP框架的运用，以及新闻发布系统的设计思路和实现细节。 总结，本文详细介绍了使用ThinkPHP开发新闻发布系统的过程，包括前端界面设计、后端功能实现、数据库设计以及框架...
纯jQuery实现前端分页功能
10-20
- 前端分页的实现应当尽量简单、直观，便于用户理解和操作。 - 要考虑到不同设备下的兼容性问题，如响应式设计。 - 对于分页按钮的事件绑定，要确保事件的正确触发，例如分页按钮的点击事件绑定。 - 在页面加载时，...
ztree+json，渲染树形菜单
前端视听
08-19 1087
前面的话：zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据。 ztree官方文档：http://www.treejs.cn/v3/api.php 现在写了一个小的demo，具体可以参考官方文档，从文档上拿来一串json数据，放在前端的代码里面，方便大家查看效果，以及方便后端返回的数据。 <!DOCTYPE html> <html> <head&g
上网搜了很多JQuery树型表格插件都不满意，决定自己写
weixin_34071713的博客
03-28 115
效果图 第一次写简书好激动，就是想和大家分享下 O(∩_∩)O哈哈哈~ 干货来了~~~~~~~~~ 1. 首先是对数据的处理 接口返回的没有结构的数据，只有数据关系 这里要把这些没有结构的数据，进行树型结构处理，你们自己看吧，copy调用就行了<(￣3￣)> !，下...
jQuery实现ztree树形结构数据
Amumu168的博客
06-14 436
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="web...
Jquery的树插件ZTree的使用
奋斗的小牛的博客
08-04 431
公司做课题用到了Jquery的树插件Ztree，记录一下所用到的，更具体的可以查看ZTree的API文档。 setting配置 var setting = { view: { showLine: true,//显示节点之间的连线。 selectedMulti: false //允许同时选中多个节点。 }, ...
前端渲染与后端渲染
weixin_52584067的博客
02-08 2509
1.后端渲染（服务器端渲染）： 语言：jsp(java server page)/php 端数：两端开发（浏览器+服务器） 过程：当用户对浏览器请求一个地址时，比如https://space.bilibili.com/，这个url=https://space.bilibili.com/，我们可以暂时称其为url1，url1请求的地址到达服务器之后，服务器会自己进行判断，原来这次请求是请求这个url1的地址，对url1进行解析，通过后台有一种jsp的技术会把你的网页给你写好，言而总之：就是你的网页已经在服务器
JQuery实现Tree
zhang745309的博客
01-05 516
第一步： 定义tree 的一些通用属性      var treeDefaultProps = {    fontSize: 12,    indent: 15, //层级间缩进量    height: 22, //条目的高度    spacing: 5, //行元素间距离    expandLevel: 1, //默认展开级别        cookieId: undefined, //是否将...
layui中引用zTree -- jQuery 树插件 使用
ll_883963的博客
07-29 1827
引入插件 layui.use(['layer', 'tree'], function () { var $ = layui.jquery; var layer = layui.layer; ｝ var setting = {//树设置 treeId : "", //zTree 的唯一标识，初始化后，等于 用户定义的 zTree 容器的 id 属性值。 identValueSetting: {//区划树设置 edit: {
JQuery zTree 插件使用，简单教程
qq_35238963的博客
08-14 2657
首先说一下，在web开发过程中会有很多的地方需要到树形的插件，JQuery 就有树的插件，本次简单教程讲的是zTree的使用教程。 官方下载地址:https://gitee.com/zTree/zTree_v3 第一步，HTML <ul id="deptTree" class="ztree"></ul> 第二步，zTree在init的时候都需要什么参数 zTre...
jquery ztree 使用教程
啊嘞嘞的博客
11-03 691
最近在做宿舍管理系统小型项目，在进行用户角色设定、角色资源（菜单）设定的时候，需要使用树行结构进行动态设置。使用到jquery树形结构插件zTree。整理一下入门级的使用zTree的方法。 1、通过官网下载demo或者下载zTree相关的插件； 官网地址：zTree官网 2、页面文件引入需要的zTree插件： 主要引入的对象有：zTree...
jQuery实现前端大数据分页示例与代码详解
文章通过一个实际项目为例，展示了前端与后端交互的过程，并强调了核心代码的编写集中在jQuery部分。 在前端，jQuery提供了一种灵活的方式来控制分页效果，而无需过多依赖服务器端。这里的关键在于利用jQuery的事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值