jquery uses EasyUI Tree to load JSON data asynchronously (spanning tree)

These days, because of the need of work, I have to make a menu that supports unlimited levels.

I am also a rookie, and there are not many things I can think of, so I used Easy UI tree component.

I have to say that easyui is really powerful.

Because it is an infinite menu, the amount of data may be a little large, so consider asynchronous loading.

However, because the data sent from the background is an entity by default, JSON string splicing is carried out in the background.

Finally, I found N multi-code on the Internet, and then asked several netizens in the group, and finally came up with this little thing.

1. HTML partial code

  <div id="categoryChooseDiv" title=" Please select a category "
      style="width: 650px; height: 300px;">
       <ul id="MyTree"></ul>
  </div>

The html part is very simple, just put an ul.

2. JS partial code

  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){                  // Judge whether the currently selected node is the root node or not 
             currentId=node.id;
            $("#chooseOk").attr( "disabled" , false );  // If it is a root node   Then OK Button available 
            }else{
            $("#chooseOk").attr( "disabled" , true );  // If it is not a root node   Then OK Button not available 
            }
          } 
      });
  }

The last few lines of code is because I need this project, only when I choose the lowest node, I will run it and click "OK". Otherwise, it is not allowed.
When the user clicks OK, all the parent nodes of the node selected by the current user need to be obtained

      var nodes=[];      // Defines an array to hold the names of each node 
      var node =$("#MyTree").tree("getSelected"); // Currently selected node 
      nodes.push(node.text);            // Put the current node first 
      var pnode = $('#MyTree').tree('getParent',node.target); // Gets the parent node of the current node 
      while(pnode!=null){
        nodes.push(pnode.text);          // Put each parent node in turn until the root node 
        pnode = $('#MyTree').tree('getParent',pnode.target);
      }
      nodes.reverse();             // Reverse ordering of array elements 
      $.each(nodes,function(){        // Cyclic value 
        var html=this;
          $("#inCategoryDiv").html( $("#inCategoryDiv").html() + html + ">>" );
      }); 

In fact, the main problem lies in the background data processing, that is, how to convert it into JSON data that easyui tree can recognize.

3. Background code (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() );  // Judge whether the current node still has child nodes 
       if(cs.size()==0){ // No child nodes   Settings  state  Empty 
       ss+=String.format("\"id\": \"%s\", \"text\": \"%s\", \"iconCls\": \"\", \"state\": \"\"", category.getId() , category.getName());
       }else{    //  There are also child nodes   Settings  state For 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); // Character encoding conversion 
    }

Roughly one process is that ID comes from the foreground, then obtains the entity object, then loops the entity, and then carries out string processing. The significance of setting state here is mainly to let tree of easyui know whether the current node is the lowest level node, and then display different icons in front.

Summary:

It is this little thing that has tossed me for several days, hehe, because I am too stupid. But fortunately, I finally understood and understood a lot of things.

I used to think JSON was mysterious, but now I think it is regular.

One of the key points of using easyui tree is the processing of JSON data, which can be realized in two ways: the first is the format method using String. This everyone can go online to refer to 1 under the relevant API and so on, I wrote the wrong first time, the placeholder of the string should be% s, I wrote it as {0} for half a day, just know the problem. The second way, the line I commented out above, is to use string splicing directly.

Then, when I got all the parent nodes of the current node above, I struggled for a long time. I went to the Internet to find a lot of codes, but they couldn't be used. Finally, I thought about a trick before I could solve it.

Advantages: Asynchronous loading can be used to support infinite levels.

Disadvantages: Too cumbersome, the background data format requirements are too high.