ul li操作多級列表

要求是顯示組織結構，會形成樹形結構。

Department從微信提供的接口之后，獲得信息是id,parentid,name等。

首先需要遍歷，對department類增加一個屬性，ArrayList<Department>childs.根據parentid，設置每個部門的直系子部門。

public static ArrayList<Department> generateDepart(){
       Token.getPeopleList();
       ArrayList<Department>departments=Token.departlist;
       for(int i=0;i<departments.size();i++){
           Department department=(Department)departments.get(i);
           ArrayList<Department>childdeparts=new ArrayList<Department>();
         //  ArrayList<People>alladdpeople=new ArrayList<People>();
           for(int j=0;j<departments.size();j++){
               if(i!=j){
               Department department1=(Department)departments.get(j);
               if(department.getId()==department1.getParentid()){
                   childdeparts.add(department1);
                 //  alladdpeople.addAll(department1.getPeoplelist());
               }
               }
           }
           department.setChildDeparts(childdeparts);
          // department.getPeoplelist().addAll(alladdpeople);
        
       }
       
       return departments;
   }

之后需要用遞歸的方法，對部門進行遞歸，依次顯示每個部門，以及其子部門的信息，因為在jsp頁面上顯示為多級列表，所以使用如下方法。

public   ArrayList<String> printTree(Department department,int blk){
      
       for(int i=0;i<blk;i++)   System.out.print("               ");
      // System.out.println("<li>"+department.getName()+"</li>");
        showlist.add("<li><a href='#'>"+department.getName()+"</a></li>");
       if(department.getChildDeparts().size()!=0){
         //  System.out.println("<ul>");
           showlist.add("<ul>");
           }
       for(int i=0;i<department.getChildDeparts().size();i++){
           
           printTree(department.getChildDeparts().get(i), blk+1);
          
       }
       if(department.getChildDeparts().size()!=0){
           showlist.add("</ul>");
     //  System.out.println("</ul>");
       }
       return showlist;
   }

在頁面上顯示的效果為：

需要完成的動作是：當點擊一個父級的<li>，其子<li>標簽會顯示，獲得消失。

這里用到了jquery動畫中slideToggle。

具體實現：

$(document).ready(function()
          {
          $("li").click(function(){
              var node=$(this);
              
             // alert(node.text());
              var list=node.nextAll("ul");
            //  alert(list.text());
              list.slideToggle();
                   }）;
                      }）;