Simple use of Easyui tree

1. Help documentation

All nodes contain the following properties:

ID: Node ID, which is important to load remote server data which is important to load remotely data

Text: the displayed node literal

State: Node status, ' Open ' or ' closed ', default is ' open '. When set to ' closed ', all child nodes of the node will be loaded from the remote server site

Checked: Indicates whether the check node is selected.

Attributes: Custom properties that can be added to a node

Children: A node array that defines some child nodes

Some examples:

Asynchronous Load Tree

The tree supports the built-in asynchronous load pattern, the user creates an empty tree, and then defines a remote server site that returns JSON data used to populate the tree to asynchronously meet the asynchronous load requirements. For example:

<ul class= "easyui-tree" data-options= "url: ' get_data.php '" ></ul>

The tree's load is via the URL ' get_data.php ' site. The loading of child nodes depends on the state of the parent node. When you expand a shutdown node, if the node does not have child nodes loaded, the node ID value is sent as an HTTP parameter, and the parameter is named ' ID ' to the remote server, Defined by the URL above. Retrieving child node data

Look at the data returned from the server.

2. Front Desk:

 $ ("#tree"). Tree ({   url: ' getorgtree.do ',   method:  ' GET ',    animate: true,   checkbox: true,   cascadecheck:true,//Cascade Selection    lines:true,//Show Dashed effect    onloadsuccess:function (node,data) {     var nodedep = $ (' #tree '). Tree (' Find ', Checkeid);    if  (null  != NODEDEP && UNDEFINED != NODEDEP)     {         $ (' #tree '). Tree (' Check ', nodedep.target);     }    },   oncheck:function (node, checked)    {     if  (checked)     {        //This logic self-proposed         }         else          {         }         }   });

3. Backstage

Backstage this code personally feel bad, but did not find how to write, for the first time

public class Orgtree {private String ID;            private String text;            Private list<orgtree> children = new arraylist<orgtree> ();      Private String State; Getter & Setter}

@RequestMapping ("/getorgtree")   public void getorgtree (string id,  Httpservletrequest request, httpservletresponse response)   {       List<Organization> orgList = new ArrayList<Organization> ();       orgmodel model = new orgmodel ();       String spid =  "";       //the ID of the parent node is -1       model.getbean (). Setparentid ("1");   //query all parent nodes conditionally        orglist = organservice.selectbycondition (model);             //  query out all parent nodes       List<OrgTree>  Otree = new arraylist<orgtree> ();      //  Traverse all parent nodes       if (Null != orglist && orglist.size ()  > 0)        {          for  (organization o :  Orglist)           {               orgtree ot = new orgtree ();               ot.setid (O.getId ());               ot.settext (O.getOrgName ());                              orgmodel childmod = new orgmodel ();               childmod.getbean (). SetParentid ( O.getid ());                //query out its child nodes based on parent node ID                list<organization> orgchild =  organservice.selectbycondition (Childmod);               if  (Orgchild != null && orgchild.size ()  >  0)               {                   List< Orgtree> list = new arraylist<orgtree> ();                   for  (Organization child  : orgchild)                    {                       Orgtree ochild = new orgtree ();                       ochild.setid (Child.getId ());                        ochild.settext (Child.getorgname ());                       list.add (ochild);                   }                   if ( List.size ()  < 0)                    {                       ot.setstate ("open");                   }                   else                   {                       ot.setstate ("closed");                   }                   ot.setchildren (list) ;              }                              otree.add (OT);                         }      }               comutil.writerjson (response,  Otree);   }

The effect is as follows:

Originally want to implement can only select one option at a time, but there is always a problem, the problem is that the Cascadecheck attribute, select a node, the other selected node to unchecked, but because of this cascade selected state, in only one child node, The parent node is unchecked, but at the same time the child node is checked, the function is not implemented, to be modified under the method is said.

Simple use of Easyui tree