1、ul li的多級列表的html程式碼tree

2、利用jquery

  <ul id="tt"></ul>  
  $('#tt').tree({   
 url:'tree_data.json'    //會發送非同步請求返回tree資料
});  

tree實體類：
public class Tree {
    private int id              ;
    private String name            ;
    private String url             ;
    
 
private int checked         ;
    private String icon            ;
    private int parent_id       ;
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        
 
this.name = name;
    }
    public String getUrl() {
        return url;
    }
    public void setUrl(String url) {
        this.url = url;
    }
    public int getChecked() {
        return checked;
    }
    public void setChecked(int checked) {
        this.checked = checked;
    }
    
 
public String getIcon() {
        return icon;
    }
    public void setIcon(String icon) {
        this.icon = icon;
    }
    public int getParent_id() {
        return parent_id;
    }
    public void setParent_id(int parent_id) {
        this.parent_id = parent_id;
    }
    
    

treeVO 返回jsontree格式，必須這種形式tree,才能渲染成樹：
public class TreeVO {
private int id;
private String text;
private int parent_id;
private String icon            ;
private String state         ;
private Map<String,Object> map=new HashMap<String ,Object>(); //用個map接收自定義屬性，必須map，轉為json後，是{"a":"","b":..}這種格式，同時具有可擴充套件性
public int getId() {
    return id;
}
public void setId(int id) {
    this.id = id;
}
public String getText() {
    return text;
}
public void setText(String text) {
    this.text = text;
}

public int getParent_id() {
    return parent_id;
}
public void setParent_id(int parent_id) {
    this.parent_id = parent_id;
}
public String getIcon() {
    return icon;
}
public void setIcon(String icon) {
    this.icon = icon;
}

public String getState() {
    return state;
}
public void setState(String state) {
    this.state = state;
}
public Map<String, Object> getMap() {
    return map;
}
public void setMap(Map<String, Object> map) {
    this.map = map;
}


}

import com.bjsxt.dto.TreeVO;

public interface TreeDao {

    List<TreeVO> getTreeByParentId(String id);

}

public class TreeDaoImpl implements TreeDao {

    @Override
    public List<TreeVO> getTreeByParentId(String id) {
        String sql;
        if(id==null || id==""){ //剛開始頁面載入完成之後，頁面出現根節點，這時，前臺不帶引數id,只有點選closed的節點才會傳送一個請求，攜帶id

            int pid=2340;
             sql ="select * from tree where parent_id ="+2340;
             System.out.println(sql);
            
        }else{

//點選這些關閉的節點時才會傳送一個url，同時攜帶這個節點的id,為什麼easyui樹高效，dtree不行，dtree是一開啟頁面載入所有的節點，而easyUi是點選節點才會非同步傳送一個請求，獲取該節點下直接子節點渲染成樹

            int pid=Integer.valueOf(id);
            sql ="select * from tree where parent_id ="+pid;
            System.out.println(sql);
        }
        Connection conn = DBUtils.createConn();
        PreparedStatement ps = DBUtils.getPs(conn, sql);
        try {
            ResultSet rs = ps.executeQuery();
            List<Tree> treeList =new ArrayList<Tree>();
            while(rs.next()){
                Tree tree=new Tree();
                tree.setId(rs.getInt("id"));
                tree.setChecked(rs.getInt("checked"));
                tree.setIcon(rs.getString("icon"));
                tree.setName(rs.getString("name"));
                tree.setParent_id(rs.getInt("parent_id"));
                tree.setUrl(rs.getString("url"));
                treeList.add(tree);
            }
            List<TreeVO> treeVOlist = this.tochange(treeList);
            System.out.println(treeList+"treelist");
            return treeVOlist;
            
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }        
        return null;
    }
 
    private List<TreeVO>  tochange(List<Tree> treeList){
        
        List<TreeVO> treeVOlist =new ArrayList<TreeVO>();
        for (Tree tree : treeList) {
            TreeVO treeVO =new TreeVO();
            treeVO.setId(tree.getId());
            List<Tree> tls = this.distinguish(tree.getId());
            if(tls.isEmpty()){
                treeVO.setState("open");
            }else{
                treeVO.setState("closed");
            }
            
            treeVO.setIcon(tree.getIcon());
            treeVO.setParent_id(tree.getParent_id());
            treeVO.setText(tree.getName());
            Map<String,Object> hashMap=new HashMap<String,Object>();
            hashMap.put("url", "");
            treeVO.setMap(hashMap);
            treeVOlist.add(treeVO);
        }
        System.out.println(treeList+"treelist1");
        return treeVOlist;
    }
    
    private List<Tree>  distinguish(int id){//判斷節點下面有沒有子節點，有的話，下面的子節點不為空，沒有的話就是葉子節點，這時會自動渲染成

    
            String sql ="select * from tree where parent_id ="+id;
    
        Connection conn = DBUtils.createConn();
        PreparedStatement ps = DBUtils.getPs(conn, sql);
        try {
            ResultSet rs = ps.executeQuery();
            List<Tree> treeList =new ArrayList<Tree>();
            while(rs.next()){
                Tree tree=new Tree();
                tree.setId(rs.getInt("id"));
                tree.setChecked(rs.getInt("checked"));
                tree.setIcon(rs.getString("icon"));
                tree.setName(rs.getString("name"));
                tree.setParent_id(rs.getInt("parent_id"));
                tree.setUrl(rs.getString("url"));
                treeList.add(tree);
            }
        
            return treeList;
            
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }        
        return null;
    }
}

@WebServlet("/tree")
public class Tree extends HttpServlet {
    private static final long serialVersionUID = 1L;
  private TreeDao treeDao =new TreeDaoImpl();
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String method = request.getParameter("method");
        if(method.equals("getTree")){
            getTree(request,response);
            
        }
        
        
    }

    private void getTree(HttpServletRequest request, HttpServletResponse response) {
        String id = request.getParameter("id");
        List<TreeVO> treeList=treeDao.getTreeByParentId(id);
        response.setContentType("text/html;charset=utf-8");
        try {
            response.getWriter().write(JSONArray.fromObject(treeList).toString());
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

-----