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的闭包
Jan 17 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
如何调试异步加载页面里包含的js文件
Oct 30 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
js css自定义分页效果
Feb 24 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
详解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版本的cron定时任务执行器使用实例
2014/08/19 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
javascript实现数独解法
2015/03/14 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
编程语言Python的发展史
2014/09/26 Python
python进程类subprocess的一些操作方法例子
2014/11/22 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
python学习入门细节知识点
2018/03/29 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
Whistles官网:英国女装品牌
2020/08/14 全球购物
Linux常见面试题
2016/10/04 面试题
教师评语大全
2014/04/28 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
2015年医院工作总结范文
2015/04/09 职场文书
2015年教师国培感言
2015/08/01 职场文书
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript