HTML page drop-down list dynamically add background data (formatted data, showing the hierarchical sense of the data)

HTML page drop-down list dynamically add background data (formatted data, showing the hierarchical sense of the data)

：

Operating Principles and techniques:

When the page has finished loading, use jquery to send AJAX requests to the background, to the background to splice <select></select> the option string. Let the string respond back, dynamically add to <select>. The string in which the data in the background is contained.

Page JS Code:

1<script type= "Text/javascript" >2     //Loading Department3     functionLoadsysgroup () {4         varGroups=document.getelementbyid ("Selectobj");5             if(Groups = =NULL ){6                 return;7             }8 $.ajax ({9Type: "POST",TenURL: "<%=request.getcontextpath ()%>" + "/master/sysgroup_getoptions.action", OneDataType: "JSON", ASuccessfunction(data) { -                     varoptions=data["Options"]; -Groups.innerhtml= "<option value= ' 0 ' >--Please select--</option>" +options; the                      -                 } -             }); -     } +      -     //when the page load is complete, the loading department +$ (document). Ready (function(){ A Loadsysgroup (); at     }); -</script> -  -<li><label> Department </label><select id= "selectobj" name= "Sysgroupid" > </select></li >

View Code

Background action and sercive method (eliminating the method of DAO layer checking data, mainly embodies processing string)

1     /**Action Layer2 * Ajax queries out all the department information3 * @Title: Ajaxquerygroup4 * @Description: TODO (here is a word describing the effect of this method)5     * @return6     * @returnString return type7     * @authorShang8 * @date 2014-9-4 a.m. 11:36:159      */Ten      PublicString Ajaxquerygroup () { One      A         Try { -              -String sbstring=Sysuserservice.findquerygroup (); theJsonobject.put ("Options", sbstring); -              -}Catch(Exception e) { -             //Todo:handle Exception + e.printstacktrace (); -             return"Error"; +}finally{ A Out.print (jsonobject); at out.close (); -         } -          -         return NULL; -     } -      in  - /**processing data for service layer to * Load out group + * @Title: Findquerygroup - * @Description: TODO (here is a word describing the effect of this method) the     * @authorShang * * @date 2014-9-25 a.m. 11:38:16 $     * @return Panax Notoginseng     * @seeOrg.ledger.service.sysuserservice#findquerygroup () -      */ the @Override +      PublicString Findquerygroup () { A         //TODO auto-generated Method Stub theStringBuffer str=NewStringBuffer (); +         //Hospital Unit Institute_unit Non-hospital unit research_center -         //The first step is to join the yuan unit $Str.append ("<optgroup label=\", ">");//Optgroup is a page category, no value.  $MyClass myclass=NewMyClass (); -Myclass.handlesb ("Institute_unit", 0);//It's a parent ID . - Str.append (myClass.sb.toString ()); theStr.append ("</optgroup>"); -         Wuyi         //Second Step splicing non-yuan unit theStr.append ("<optgroup label=\" non-hospital unit \ ">"); -MyClass myclass2=NewMyClass (); WuMyclass2.handlesb ("Research_center", 0); - Str.append (myClass2.sb.toString ()); AboutStr.append ("</optgroup>"); $          -         returnstr.tostring (); -     } -  A     /** + * Internal class (primary for processing data) recursion the * @ClassName: MyClass - * @Description: TODO (Here's a word describing the role of this class) $     * @authorShang the * @date 2014-9-25 a.m. 11:46:34 the * This example, the first level is not labeled, the data is only two levels, if the background data has more than one level, the hierarchical relationship will be displayed. Mastering Ideas the      */ the     classmyclass{ -StringBuffer sb=NewStringBuffer (); in          the         //Stitching Content the          Public voidhandlesb (String unittype,integer num) { About             //queries the set of eligible collections based on the parent ID (parent-child relationships, in database tables, the parents ' primary key ID is the value of the child's parent ID field) theList<sysgroup> listgroups=Sysgroupservice.querygroupsbytype (unittype); the             //if it is not empty, the string is processed by stitching the             if(listgroups!=NULL&&listgroups.size () >0){ +                 intm=0;//number of times used to record loops -num++;//used to record the number of times the method was run the                 Bayi                  for(intI=0;i<listgroups.size (); i++){ theSb.append ("<option value=\" "+listgroups.get (i). Getsysgroupid () +" \ ">"); the                      -                     //decision Location -                     //A recursive description is a hierarchy, it needs to be hierarchical, then add a space, as to how much, with the number of recursion to determine, thus showing a sense of hierarchy the                      for(intj=1;j<num;j++){ theSb.append ("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"); the                     } the                      -                     //decide the symbol for the front decoration the                     if(num!=1){ the                         if(m< (Listgroups.size ()-1)){ the                             //Note that the loop does not last94Sb.append ("&nbsp;&nbsp;┠&nbsp;&nbsp;"); the}Else { theSb.append ("&nbsp;&nbsp;┖&nbsp;&nbsp;"); the                         }98}Else { AboutSb.append ("&nbsp;&nbsp;"); -                     }101                     102                     //Add a name103 Sb.append (Listgroups.get (i). Getsysgroupname ());104Sb.append ("</option>"); the                     //Loop once, the number of cycles is increased by 1.106m++;107                     108                     //recursion. Used to add subgroups of the current group (if any, then SB adds, if not, the method runs, enters the next loop of the current layer)109 Handlesb (Listgroups.get (i). Getsysgroupid (), num); the                 }111                  the             }113         } the          the}

View Code

HTML page drop-down list dynamically add background data (formatted data, showing the hierarchical sense of the data)