easyUI 异步TREE

最新推荐文章于 2021-09-01 13:46:01 发布

陈鋆

最新推荐文章于 2021-09-01 13:46:01 发布

阅读量3.3k

点赞数

分类专栏：前端技术文章标签： easyui 异步 Tree

本文链接：https://blog.csdn.net/jun55xiu/article/details/15499177

版权

前端技术专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了前端使用easyUI Tree组件进行DOM元素定义，并通过JavaScript控制层初始化TREE，实现数据交互。同时，阐述了后台Control层如何组织数据结构，通过RESTful API返回JSON格式的数据，供前端展示。特别强调了异步加载机制，当用户点击树节点时，后台会根据ID自动查询并返回更深层次的数据，以实现动态加载。

摘要由CSDN通过智能技术生成

1：前台easyUI tree DOM元素定义：

2：JS控制层初始化TREE

   $('#virtual_host_tree_Screen').tree({
       url : 'host/virtual/',
       method : 'GET',
       animate : true,
       onClick : function(node) {
           if (node.attributes == 0) {
               $('#virtual_host_tree_Screen').tree('expand', node.target);
           } else {
               _this.selVm_Screen(node.id);
           }
       }
   });

3：后台Control层写法：

List<Map<String, Object>> list = new ArrayList<Map<String,Object>>(hosts.size());

Map<String, Object> hostJson = null;
for(THost host : hosts){
           hostJson = new HashMap<String, Object>(2);
           hostJson.put("id", host.getId());
           hostJson.put("text", host.getHostname());
           hostJson.put("state", state);
           hostJson.put("attributes", host.getVirtual());
           list.add(hostJson);
}
return list;

4 后台JSON数据返回前台格式:

第一次加载 id = 0，即：http://192.168.0.248:8080/vCat/host/virtual/