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 相关文章推荐
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
jquery中done和then的区别(详解)
Dec 19 jQuery
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 Javascript
vue select 获取value和lable操作
Aug 28 Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 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开发过程中关于继承的使用方法分享
2011/06/17 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
javascript获取flash版本号的方法
2014/11/20 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
vue实现购物车案例
2020/05/30 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
Golang与python线程详解及简单实例
2017/04/27 Python
详解flask表单提交的两种方式
2018/07/21 Python
Python循环结构的应用场景详解
2019/07/11 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
python的sys.path模块路径添加方式
2020/03/09 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
什么是GWT的Module
2013/01/20 面试题
总经理职责范文
2013/11/08 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
个性与发展自我评价
2014/02/11 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
高中教师个人总结
2015/02/10 职场文书
城管个人总结
2015/02/28 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
Go归并排序算法的实现方法
2022/04/06 Golang