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();
                   }）;
                      }）;

 

转载于:https://www.cnblogs.com/bounceFront/p/5570389.html