Introduction aux algorithmes récursifs JavaScript

Cet article présente principalement l'algorithme récursif JavaScript pour générer un menu arborescent, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'exemple de cet article partage avec vous comment générer un menu arborescent avec. js. Le code spécifique est pour votre référence. Le contenu spécifique est le suivant

1 Rendu final (Il s'agit uniquement d'implémenter l'algorithme et de le charger dans la page sans aucune interface CSS. optimisation)

Remarque : cet exemple contient un menu de répertoire à trois niveaux, mais il peut en réalité prendre en charge N niveaux (vous pouvez utiliser ce code pour le tester vous-même)

2. Source de données

Les informations du menu proviennent généralement de la table de données de la base de données et sont une table auto-jointante, qui contient les champs principaux (clé primaire, nom du menu , identifiant parent);

Cet exemple se trouve sur la page frontale Utilisez un tableau d'objets pour simuler l'obtention d'informations de menu à partir de la base de données

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 },
];　

<🎜 ; > Remarque : id - identifiant de clé primaire du menu ; nom du menu ; pid - identifiant parent

3. Programmation

Sources générales d'informations sur le menu

//菜单列表html
    var menus = '';
 
    //根据菜单主键id生成菜单列表html
    //id：菜单主键id
    //arry：菜单数组信息
    function GetData(id, arry) {
      var childArry = GetParentArry(id, arry);
      if (childArry.length > 0) {
        menus += &#39;<ul>&#39;;
        for (var i in childArry) {
          menus += &#39;<li>&#39; + childArry[i].name;
          GetData(childArry[i].id, arry);
          menus += &#39;</li>&#39;;
        }
        menus += &#39;</ul>&#39;;
      }
    }
 
    //根据菜单主键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;
    }

Remarque : Cet exemple de menu utilise une démonstration de liste non ordonnée ul, la variable de menu est le menu html généré final

4. >

Remarque : GetData (0, menuArry), 0 - clé primaire du menu supérieur

GetData(0, menuArry)
$("body").append(menus);

Code complet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!