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自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
Angular封装搜索框组件操作示例
Apr 25 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 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 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
为javascript添加String.Format方法
2020/08/11 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
JavaScript 对象模型 执行模型
2009/12/06 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
Python中__init__.py文件的作用详解
2016/09/18 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
党员党性分析材料
2014/02/17 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
第一军规观后感
2015/06/12 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python
JS代码编译器Monaco使用方法
2021/06/11 Javascript
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android