收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > jQuery > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

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

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

我也是菜鸟一只,能想到的东西不多,所以用了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} 找了半天,才知道问题所在。 第二种方式,就是我上面注释掉的那一行,直接使用字符串拼接。

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

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

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

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

jQuery的中 is(':visible') 解析及用法(必看)
实例选择body元素中每个可见的元素:$("body:visible")定义和用法:visible选择器选取每个当前是可见的元素。除以下几种情况之外的元素即是可见元素:设置

jq stop()和:is(:animated)的用法及区别(详解)
stop(true,true):表示停止匹配元素正在进行的动画并跳转到末状态,清空未执行完的动画队列。常用于解决光标移入移出得过快导致的动画效果与光标动作

浅谈jQuery中的$.extend方法来扩展JSON对象
$.extend方法可以扩展JSON对象,用一个或多个其他对象来扩展一个对象,返回被扩展的对象。例一合并settings和options,修改并返回settingsvarsettings={validate:fa

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号