JavaScript 재 귀 알고리즘 생 성 트 리 메뉴

본 논문 의 사례 는 js 생 성 트 리 메뉴 의 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
1.최종 효과 그림(여 기 는 알고리즘 을 실현 하기 위해 페이지 에 불 러 오고 그 어떠한 css 인터페이스 최적화 도 하지 않 습 니 다)

설명:이 예제 에는 3 급 디 렉 터 리 메뉴 가 포함 되 어 있 지만 실제로는 N 급 을 지원 합 니 다.(이 코드 를 사용 하여 자체 테스트 할 수 있 습 니 다)
2.데이터 원본
메뉴 정 보 는 일반적으로 데이터베이스 에 있 는 데이터 시트 에서 기원 되 고 자체 연결 표 입 니 다.그 중에서 주요 필드(메 인 키,메뉴 이름,부모 급 id)를 포함 합 니 다.
이 예제 는 전단 페이지 에서 대상 배열 을 사용 하여 데이터베이스 에서 메뉴 정 보 를 가 져 오 는 것 을 모 의 합 니 다.

var menuArry = [
{ id: 1, name: "    ", pid: 0 },
{ id: 2, name: "    ", pid: 1 },
{ id: 3, name: "    ", pid: 1 },
{ id: 4, name: "    ", pid: 2 },
{ id: 5, name: "    ", pid: 0 },
{ id: 6, name: "    ", pid: 5 },
{ id: 7, name: "    ", pid: 6 },
{ id: 8, name: "    ", pid: 6 },
]; 
설명:id―메뉴 메 인 키 id;name―메뉴 이름;pid―아버지 급 id
3.프로 그래 밍
메뉴 정보 일반 원본

//    html
    var menus = '';
 
    //      id      html
    //id:    id
    //arry:      
    function GetData(id, arry) {
      var childArry = GetParentArry(id, arry);
      if (childArry.length > 0) {
        menus += '<ul>';
        for (var i in childArry) {
          menus += '<li>' + childArry[i].name;
          GetData(childArry[i].id, arry);
          menus += '</li>';
        }
        menus += '</ul>';
      }
    }
 
    //      id      
    //id:    id
    //arry:      
    function GetParentArry(id, arry) {
      var newArry = new Array();
      for (var i in arry) {
        if (arry[i].pid == id)
          newArry.push(arry[i]);
      }
      return newArry;
    }
설명:이 예제 메뉴 는 ul 무질서 목록 을 사용 하여 보 여 줍 니 다.menus 변 수 는 최종 생 성 된 메뉴 html 입 니 다.
4.운행

GetData(0, menuArry)
$("body").append(menus);
설명:GetData(0,menuArry),0―최상 위 메뉴 메 인 키
5.전체 코드

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <script src="jquery-1.8.3.min.js"></script>
</head>
<body>
 
  <script type="text/javascript">
    $(function () {
      var menuArry = [
      { id: 1, name: "    ", pid: 0 },
      { id: 2, name: "    ", pid: 1 },
      { id: 3, name: "    ", pid: 1 },
      { id: 4, name: "    ", pid: 2 },
      { id: 5, name: "    ", pid: 0 },
      { id: 6, name: "    ", pid: 5 },
      { id: 7, name: "    ", pid: 6 },
      { id: 8, name: "    ", pid: 6 },
      ];
 
      GetData(0, menuArry)
      $("body").append(menus);
    });
 
    //    html
    var menus = '';
 
    //      id      html
    //id:    id
    //arry:      
    function GetData(id, arry) {
      var childArry = GetParentArry(id, arry);
      if (childArry.length > 0) {
        menus += '<ul>';
        for (var i in childArry) {
          menus += '<li>' + childArry[i].name;
          GetData(childArry[i].id, arry);
          menus += '</li>';
        }
        menus += '</ul>';
      }
    }
 
    //      id      
    //id:    id
    //arry:      
    function GetParentArry(id, arry) {
      var newArry = new Array();
      for (var i in arry) {
        if (arry[i].pid == id)
          newArry.push(arry[i]);
      }
      return newArry;
    }
  </script>
</body>
</html>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기