100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > jQuery-EasyUI异步加载树形菜单

jQuery-EasyUI异步加载树形菜单

时间:2021-04-21 07:23:20

相关推荐

jQuery-EasyUI异步加载树形菜单

为什么80%的码农都做不了架构师?>>>

1】把tree定义在一个空<ul>元素

<div><ul id="layout_west_tree"></ul></div>

2】使用Javascript加载数据

<script type="text/javascript">var layout_west_tree;var layout_west_tree_url = '${pageContext.request.contextPath}/resourceController/tree';}$(function() {layout_west_tree = $('#layout_west_tree').tree({url : layout_west_tree_url,parentField : 'pid',lines : true,onClick : function(node) {/*根据点击的资源,添加选项卡*/},onLoadSuccess : function(node, data) {//返回的JSON数据(data)从这里接收parent.$.messager.progress('close');}});});</script>

3】resourceController中的tree方法

@RequestMapping("/tree")@ResponseBodypublic List<Tree> tree(HttpSession session) {//获取当前账户的用户信息(包括ID/登录名/用户可以访问的资源地址列表)SessionInfo sessionInfo = (SessionInfo) session.getAttribute(ConfigUtil.getSessionInfoName());return resourceService.tree(sessionInfo);}

4】resourceService的tree方法

public List<Tree> tree(SessionInfo sessionInfo) {List<Tresource> l = null;List<Tree> lt = new ArrayList<Tree>();Map<String, Object> params = new HashMap<String, Object>();params.put("resourceTypeId", "0");// 菜单类型的资源if (sessionInfo != null) {params.put("userId", sessionInfo.getId());// 自查自己有权限的资源l = resourceDao.find("select distinct t from Tresource t join fetch t.tresourcetype type join fetch t.troles role join role.tusers user where type.id = :resourceTypeId and user.id = :userId order by t.seq", params);} else {l = resourceDao.find("select distinct t from Tresource t join fetch t.tresourcetype type where type.id = :resourceTypeId order by t.seq", params);}if (l != null && l.size() > 0) {for (Tresource r : l) {Tree tree = new Tree();BeanUtils.copyProperties(r, tree);if (r.getTresource() != null) {tree.setPid(r.getTresource().getId());}tree.setText(r.getName());tree.setIconCls(r.getIcon());Map<String, Object> attr = new HashMap<String, Object>();attr.put("url", r.getUrl());tree.setAttributes(attr);lt.add(tree);}}log.info("debug级别的日志输出----"+JSON.toJSONString(lt)); return lt;}

5】返回的JSON数据如下:

[{"attributes": {},"checked": false,"iconCls": "plugin","id": "xtgl","state": "open","text": "系统管理"},{"attributes": {"url": "/chartController/userCreateDatetimeChart"},"checked": false,"iconCls": "chart_curve","id": "userCreateDatetimeChart","pid": "chart","state": "open","text": "用户图表"},{"attributes": {"url": "/resourceController/manager"},"checked": false,"iconCls": "database_gear","id": "zygl","pid": "xtgl","state": "open","text": "资源管理"},{"attributes": {"url": "/roleController/manager"},"checked": false,"iconCls": "tux","id": "jsgl","pid": "xtgl","state": "open","text": "角色管理"},{"attributes": {"url": "/userController/manager"},"checked": false,"iconCls": "status_online","id": "yhgl","pid": "xtgl","state": "open","text": "用户管理"},{"attributes": {"url": "/bugController/manager"},"checked": false,"iconCls": "bug","id": "buggl","pid": "xtgl","state": "open","text": "BUG管理"},{"attributes": {"url": "/druidController/druid"},"checked": false,"iconCls": "server_database","id": "sjygl","pid": "xtgl","state": "open","text": "数据源管理"}]

6】返回的JSON,通过onLoadSuccess方法接收,数据就装填进Tree控件里了

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。