EasyUI synchronization tree

EasyUI synchronization tree
Introduction tree control

Tree control, which is very common. For example, it can be used as a hierarchical menu. For example, part of the company's division, selection of provinces and cities...

The biggest advantage is that there is a hierarchical relationship, which seems to be clear in terms of choice, just like a bunch of disorganized json, which you feel like formatting with bejson.

Therefore, it is necessary to master the tree control. Why? Because it is useful and can be used properly, it can also improve the user experience,

Two loading methods of the tree

Tree loading methods can be divided into two types: Regular loading and asynchronous loading. The normal loading means loading the entire tree at a time, asynchronous loading means that child nodes are loaded only when the parent node is expanded.

In general, we can see that when the asynchronously loaded tree clicks the parent node, there will be a prompt for load ~ Next, you can also capture packets ~

Okay ~ Today, let's talk about Synchronous loading. This is often used when the data volume is small. In another case, you have to use synchronous loading, that is, when you need to select all or cascade. If asynchronous loading is used, if you select the parent node without expanding the parent node, only the parent node is selected (because the child nodes under it are not yet loaded ), this results in "loss of selection". Therefore, synchronous loading is required. If the data volume is large, you need to provide appropriate progress prompts to improve the user experience.

Tree In EasyUI

Let's take a look at the specific usage of tree in easyUI:

Two ways to load data: One is through js data, and the other is through the li tag

 
 
            
  
  
 My Documents 
   
 
    
 Photos 
     
 
      
 Friend 
 
      
 Wife 
 
     
 
 
    
 Program Files 
     
 
      
Java
 
      
Games
 
     
 
 
    
welcome.html
 
   
 
        
 
 

It's easy. I personally recommend using js to load complicated content, because it's easier to assemble data and just get a json file ~

Of course, if you use templates such as Velocity, the second method seems to be good ~ Well, let's get down to the truth. I believe you understand through the above line of code that the key to tree is how to organize the data structure.

First, we need to return an array to the foreground. The structure is similar:

[    {        "id": 1,        "text": "My Documents",        "children": [            {                "id": 11,                "text": "Photos",                "state": "closed",                "children": [                    {                        "id": 111,                        "text": "Friend"                    },                    {                        "id": 112,                        "text": "Wife"                    }                ]            },            {                "id": 14,                "text": "about.html"            },            {                "id": 15,                "text": "welcome.html"            }        ]    }]

Each json in this array represents the parent level at the highest level. The above defines only one parent level-My parent level. In addition, the highest parent level contains three child levels: Photos with id 11, about with id 14, and welcome with id 15.

The id is generally the identifier of the node and is unique.

Text indicates the text displayed on the node.

State specifies whether the node is expanded or closed (invalid for leaf nodes) 'open' or 'closed '.

Among them, Photos also has sub-level... About and welcome do not contain child-level nodes. Such special nodes are called Leaf nodes. We believe that the children attribute determines whether the node is a leaf node. If the attribute does not exist or is empty, it is a leaf node.

Take a look at the json tree:

Here, we can also see that easyUI displays "document icons" for leaf nodes by default, while "folder icons" for nodes containing lower levels. It is also easy to replace these icons.

You only need to define an iconCls in the above attributes ~ <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + z/keys + 49s28serHsLzTyc/Su7j2tuDRob/yY2hlY2tib3g8L3A + CjxwPjxwcmUgY2xhc3M9 "brush: java;">

With this added, the tree node has another attribute, checked, which indicates whether the node is selected.

To sum up, we can define five types of attributes for tree node: id, text, state, iconCls, and checked. Don't forget, there is a children, and this children is also a treenode.

In the background, we can define a TreeNode entity to facilitate data assembly and logic sorting.

Specific Application

We probably know the usage of tree, so let's consider this scenario. In a hotel, different waiters need to serve different rooms. For example, Mr. Wang is responsible for Layer 4 and layer 5, mr. Li is responsible for layer 6 and Layer 7. Of course, Mr. Wang is only responsible for some rooms on the third floor. In addition, there may be different buildings in the hotel, such as the main building and sub-building. The rooms are in these buildings. Considering that we need to select a specific room, it is reasonable to use synchronous loading.

Here we can summarize several levels of relationships: floor number -- level number -- room number (from high to low), and the floor number and level number are both parent nodes, while the room is a leaf node.

In addition, we want to add a "All Rooms" parent node to facilitate all selection:

List
 
  
TreeNodeList = new ArrayList
  
   
(1); // The first layer has only one headRoomNode head = new RoomNode (); List
   
    
Children = new ArrayList
    
     
(); Head. setChildren (children); head. setId ("0"); head. setText ("All Rooms"); head. setIconCls ("icon-tree-room-all"); treeNodeList. add (head); List
     
      
BuildingList = roomService. getallhils (); for (Hall _ building: buildingList) {List
      
        GuestRoomList = roomService. getAllGuestRoomsFloor (_ building. getBg_code (); List
       
         FloorList = new ArrayList
        
          (GuestRoomList. size (); RoomNode building = new RoomNode (); building. setId (_ building. getBg_code (); building. setText (_ building. getBg_descript (); building. setState ("closed"); building. setChildren (floorList); building. setIconCls ("icon-tree-room-building"); children. add (building); for (GuestRoom _ floor: guestRoomList) {guestRoomList = roomService. getGuestRooms (_ floor. getFloor (), _ building. getBg_code (); List
         
           RoomList = new ArrayList
          
            (GuestRoomList. size (); RoomNode floor = new RoomNode (); floor. setId (_ floor. getFloor (); floor. setText (_ floor. getFloor () + "floor"); floor. setState ("closed"); floor. setChildren (roomList); floor. setIconCls ("icon-tree-room-floor"); floorList. add (floor); for (GuestRoom _ room: guestRoomList) {RoomNode room = new RoomNode (); if (checkedRooms! = Null & checkedRooms. indexOf (_ room. getRoomno (). trim ()>-1) {room. setChecked (true);} room. setId (_ room. getRoomno (). trim (); room. setText (_ room. getRoomno () + "room"); room. setIconCls ("icon-tree-room"); roomList. add (room );}}}
          
         
        
       
      
     
    
   
  
 

The whole process of synchronous loading is still relatively simple. It is nothing more than configuring the parent-child relationship through setChildren, and there are no other complicated operations.

Below is a replacement icon:

In the next article, we will introduce how to use the asynchronous tree ~ The advantage of this type of tree is that it can be loaded when used, saving unnecessary traffic and loading time.