视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
关于JqueryzTree树控件异步加载操作
2020-11-27 19:35:13 责编:小采
文档
 这篇文章主要介绍了Jquery zTree 树控件异步加载操作,学习Jquery zTree异步加载,zTree实现一套能完成大部分常用功能的 Tree插件,感兴趣的小伙伴们可以参考一下

zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件

  • 兼容 IE、FireFox、Chrome 等浏览器

  • 在一个页面内可同时生成多个 Tree 实例

  • 支持 JSON 数据

  • 支持一次性静态生成 和 Ajax 异步加载 两种方式

  • 支持多种事件响应及反馈

  • 支持 Tree 的节点移动、编辑、删除

  • 支持任意更换皮肤 / 个性化图标(依靠css)

  • 支持极其灵活的 checkbox 或 radio 选择功能

  • 简单的参数配置实现 灵活多变的功能

  • 异步加载的意思就是: 当点击展开树节点时,才去请求后台action返回点击节点的子节点数据并加载。

    这里面主要设计ztree的setting变量的async属性设置:

    var setting = {
     async: {
     enable: true,
     url:InitServiceIpsData.action,
     autoParam:[id, name],
     dataFilter: filter 
     },

    当点击展开树节点时,会请求url指定的action获取子节点数据,然后绑定到ztree上。

    注意这里后台action返回的是JSON字符串,而ztree绑定新的节点数据只接收数组,所以需要在绑定前用filter函数进行数据清洗转换操作,将字符串转换为数组:

    //过滤异步加载ztree时返回的数据 
     function filter(treeId, parentNode, childNodes) {
     if (!childNodes) 
     return null; 
     childNodes = eval((+childNodes+)); //必须转换为[{id:103,pId:1,name:'子节点3'}];这样的格式 
     return childNodes;
     }

    这样点击展开ztree树节点时,就会请求action获取子节点数据并绑定了。

    下面是后台action的一个实现:

    public String InitServiceIpsData()
     {
     HttpServletRequest request = ServletActionContext.getRequest();
     String id = request.getParameter(id);
     String name = request.getParameter(name);
     System.out.println(请求获取+name+的ip列表);
     
     List<hashmap<string,object>> list = new ArrayList<hashmap<string,object>>(); 
     for(int i = 1; i <= 2; i++){ 
     HashMap<string,object> hm = new HashMap<string,object>(); 
     hm.put(id, id + 0 + i);
     hm.put(pId, id);
     hm.put(name, name + _IP_ + i);
     hm.put(isParent, false);
     list.add(hm);
     } 
     
     JSONArray finalJson = JSONArray.fromObject(list);
     this.initServiceIpsData = finalJson.toString();
     return SUCCESS;
     }</string,object></string,object></hashmap<string,object></hashmap<string,object>

    下载本文
    显示全文
    专题