jquery使用EasyUI Tree异步加载JSON数据(生成树)


Posted in Javascript onFebruary 11, 2017

这几天因为工作需要,要做一个支持无限级的菜单。

我也是菜鸟一只,能想到的东西不多,所以用了Easy UI的tree组件。

不得不说,easyui确实很强大。

因为是无限级菜单,数据量可能有点大,所以考虑采用异步加载。

但是因为后台默认传来的数据是 一个实体,所以又在后台进行了JSON字符串拼接。

最后,在网上找了N多代码,然后又去问了好几个群里的网友,终于搞出来这个小东西。

一、HTML部分代码

<div id="categoryChooseDiv" title="请选择分类"
      style="width: 650px; height: 300px;">
       <ul id="MyTree"></ul>
  </div>

html部分很简单,只要放一个ul就可以了。

二、JS部分代码

function showCategory(){
      $('#MyTree').tree({  
         checkbox: false,  
         url: '/category/getCategorys.java?Id=0',  
         onBeforeExpand:function(node,param){ 
           $('#MyTree').tree('options').url = "/category/getCategorys.java?Id=" + node.id;
         },        
        onClick:function(node){
          var state=node.state;
           if(!state){                  //判断当前选中的节点是否为根节点
             currentId=node.id;
            $("#chooseOk").attr( "disabled" , false );  //如果为根节点 则OK按钮可用
            }else{
            $("#chooseOk").attr( "disabled" , true );  //如果不为根节点 则OK按钮不可用
            }
          } 
      });
  }

最后几句代码是因为我这个项目需要,只有选择到最下级节点的时候,才运行点击“确定”。否则不允许。
当用户点击确定的时候,需要获取 当前用户选中节点 的所有父节点

var nodes=[];      //定义数组用来存放各个节点名称
      var node =$("#MyTree").tree("getSelected"); //当前选中节点
      nodes.push(node.text);            //首先放入当前节点
      var pnode = $('#MyTree').tree('getParent',node.target); //获取当前节点的父节点
      while(pnode!=null){
        nodes.push(pnode.text);          //依次放入各个父节点,直到根节点为止
        pnode = $('#MyTree').tree('getParent',pnode.target);
      }
      nodes.reverse();             //数组元素倒序排序
      $.each(nodes,function(){        //循环取值
        var html=this;
          $("#inCategoryDiv").html( $("#inCategoryDiv").html() + html + ">>" );
      });

其实,主要问题在于后台对数据的处理,即如何能够转化为 easyui tree才可以识别的JSON数据。

三、后台代码(Java)

public ResponseEntity<String> findBy(Integer Id ) {
    List<Category> categorys = getcategorys(Id );
    String ss="";
    ss+="[";
    for( Category category : categorys )
       {
       ss+="{";
       //ss += "\"id\": \""+category.getId()+"\",\"text\": \""+category.getName().toString()+"\",\"iconCls\": \"icon-ok\",\"state\": \"closed\"";;
       List<Category> cs = getcategorys( category.getId() );  //判断当前节点是否还有子节点
       if(cs.size()==0){ //没有子节点 设置 state 为空
       ss+=String.format("\"id\": \"%s\", \"text\": \"%s\", \"iconCls\": \"\", \"state\": \"\"", category.getId() , category.getName());
       }else{    // 还有子节点 设置 state为closed
       ss+=String.format("\"id\": \"%s\", \"text\": \"%s\", \"iconCls\": \"\", \"state\": \"closed\"", category.getId() , category.getName());
      }
       ss+="},";
       }
       ss=ss.substring(0, ss.length() - 1); 
       ss+="]";
      return super.responseString(ss); //字符编码转换
    }

大致一个流程就是前台传来ID,然后获取到实体对象,然后对实体进行循环,然后进行字符串处理这里设置state的意义主要在于让 easyui 的tree可以知道当前节点是否为最低级节点,然后在前面显示不同的图标。

总结:

就是这个小东西,折腾了我好几天,呵呵,因为俺太笨了。不过还好最后搞懂了,也理解了很多东西。

以前一直觉得JSON这东西很神秘,现在觉得它还是有规律的。

使用easyui tree的重点之一,就是对JSON数据的处理,有两种方式可以实现:第一就是使用String的format方法。这个大家可以去网上参考一下相关的API等等,我第一次写错了,字符串的占位符应该是 %s  我写成了 {0} 找了半天,才知道问题所在。 第二种方式,就是我上面注释掉的那一行,直接使用字符串拼接。

然后上面获取当前节点的所有父节点的时候,又纠结了半天,去网上找了很多代码,都不能用,最后还是自己想了一招,才得以解决。

优点:可以使用异步加载,支持无限级。

缺点:太繁琐,对后台的数据格式要求过高。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在JavaScript中获取请求的URL参数
Dec 22 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
Vue实现省市区三级联动
Dec 27 Vue.js
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 #Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 #Javascript
JavaScript表单验证的两种实现方法
Feb 11 #Javascript
jQuery实现复制到粘贴板功能
Feb 11 #Javascript
js实现PC端和移动端刮卡效果
Mar 27 #Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 #Javascript
BootStrap select2 动态改变值的方法
Feb 10 #Javascript
You might like
php 获取全局变量的代码
2011/04/21 PHP
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
document.all与WEB标准
2020/05/13 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
在Django的URLconf中使用命名组的方法
2015/07/18 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
Python netmiko模块的使用
2020/02/14 Python
详解python的变量缓存机制
2021/01/24 Python
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
就业推荐自我鉴定
2013/10/06 职场文书
计算机专业自我鉴定
2013/10/15 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
运动会宣传稿100字
2015/07/23 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers