使用 ajax 的方式给 zTree 提供数据 | 学习笔记

简介: 快速学习使用 ajax 的方式给 zTree 提供数据

开发者学堂课程【使用 Spring Data Redis+zTree 实现授权模型的设计与思考ajax 的方式给 zTree 提供数据学习笔记,与课程紧密连接,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/745/detail/13179


使用 ajax 的方式给 zTree 提供数据


内容介绍:

一、使用 ajax 的方式给 zTree 提供数据


一、使用 ajax 的方式给 zTree 提供数据

1、查询对象

想保存数据,第一步//先把角色对象查询出来,

第二步//查询出数据库中的所有的菜单的数据,因为一个Jason框代表一个菜单的数据,假如数据库中有二十个菜单,生成的ztree节点就应该有二十个,所以应该将所有数据全查到,一个数据对应一个jason对象。

第三步//角色所拥有的菜单全部都查询出来,是想查询拥有哪些,只要是拥有的默认是一个选中的状态,

//先把角色对象查询出来

Role role = roleservice.get( model.getId());

/查询出数据库中的所有的菜单的数据

List<Module>mlis= moduleService.find(nul1);null 表示没有条件,

/角色所拥有的菜单全部都查询出来

可以使用角色导航,Set<Module>modules = role.getModules();l

数据就查询完成了,接下里就生成数据格式,

1.生成数据格式:

第一步://遍历mlist数据,

需要二十个数据就需要遍历,来一个一个的生成,

for (Module m : mlist){ 这就是生成遍历循环的一个方式,遍历完成之后就可以生成数据格式,

//创建 list 集合,用来存储数据

List<Map<String,0bject>> list = new ArrayL.ists>()接下来就可以在 list 里面存储数据,不对,应该先 newMap,将数据存储到 map中,

/遍历 mlist 数据

for (Module m : mlist){

//创建 Map 集合

Map<String, Object> map = new HashMap<>();

map.put( "id" , m.getId());

Map 完成之后需要向里面输入数据,第一个值是id

/创建 Map 集合

Map<String, object> map = new HashMaD<>(): I

map.put( "id", m.getId());表示输入主id

map.put( "pId", m.getParentId());表示输入副id

map.put( "name", m.getName());表示输入名字

//判断,当前角色是否拥有m菜单,如果有,默认选中的状态

if(modules.contains(m)){

如果有的化输入 map.put( "name", m.getName());l 表示包含 ture

}else{  不包含 false

map.put( "checked", "false");

完成后就可以生成相应的对象,然后将 map 存档,

/把 map 存入到 list 集合中

list.add(map);

存完之后list数据就全部装满了,

/把 list 转换成 json 的字符串,响应出去。使用 FastIson 是阿里巴巴提供的一个转换工具

FastJsonUtils .write_ json(response, list) ;

将list的集合传过来,会将其先转换成 jason 的集合,通过 response 回应回去,

HttpServletResponse response = ServletActionContext .getResponse();|后台拿数据的方法,异步的方法就完成了,完成之后启动服务器,查看是否生成ztree,每个角色所运营的都不一样,可以点击不同的角色去验证,查看拥有哪些菜单,现在需要重新登录,因为服务器已经停了,登录进去点击菜单管理,点击角色管理,

image.png

相关文章
|
4月前
|
Web App开发 JSON 前端开发
Ajax实现动态及时刷新表格数据
Ajax实现动态及时刷新表格数据
|
4月前
|
JSON 前端开发 JavaScript
AJAX 课程学习笔记三
AJAX 课程学习笔记三
|
5天前
|
JSON 前端开发 数据格式
layui 穿梭框transfer组件 数据data用ajax来获取
layui 穿梭框transfer组件 数据data用ajax来获取
14 2
|
4月前
|
XML 前端开发 JavaScript
使用 AJAX 提升网页数据的动态交互
使用 AJAX 提升网页数据的动态交互
|
4月前
|
XML 机器学习/深度学习 JSON
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
57 0
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
|
3月前
|
前端开发 JavaScript Java
Spring创建Ajax和接受Ajax数据-spring20
Spring创建Ajax和接受Ajax数据-spring20
|
3月前
|
PHP
php+ajax传file文件数据
php+ajax传file文件数据
31 0
|
4月前
|
数据采集 前端开发 JavaScript
Python爬虫之Ajax数据爬取基本原理#6
Ajax数据爬取原理【2月更文挑战第19天】
69 1
Python爬虫之Ajax数据爬取基本原理#6
|
4月前
|
JSON 前端开发 数据格式
Ajax传递json数据
Ajax传递json数据
|
4月前
|
JSON 缓存 前端开发
AJAX 课程学习笔记二
AJAX 课程学习笔记二