Maison >interface Web >js tutoriel >Comment utiliser le framework Layui pour développer un système de gestion backend prenant en charge les menus à plusieurs niveaux

Comment utiliser le framework Layui pour développer un système de gestion backend prenant en charge les menus à plusieurs niveaux

WBOYoriginal: 2023-10-26 12:33:13845parcourir

Layui est un framework d'interface utilisateur frontal léger avec des composants riches et une syntaxe concise, très adapté au développement de la gestion backend systèmes . Dans cet article, nous présenterons comment utiliser le framework Layui pour développer un système de gestion backend prenant en charge les menus à plusieurs niveaux et fournirons des exemples de code spécifiques.

Tout d'abord, nous devons introduire le framework Layui dans le projet. Layui peut être introduit en téléchargeant directement les fichiers sources ou en utilisant CDN. Ensuite, nous créons un fichier HTML comme page d'accueil du système de gestion backend.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>后台管理系统</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.4/css/layui.css">
</head>
<body>
  <div class="layui-layout layui-layout-admin">
    <div class="layui-header">
      <div class="layui-logo">后台管理系统</div>
    </div>
    <div class="layui-side">
      <div class="layui-side-scroll">
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
          <li class="layui-nav-item"><a href="">菜单1</a></li>
          <li class="layui-nav-item layui-nav-itemed">
            <a class="" href="">菜单2</a>
            <dl class="layui-nav-child">
              <dd><a href="">子菜单1</a></dd>
              <dd><a href="">子菜单2</a></dd>
              <dd><a href="">子菜单3</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item"><a href="">菜单3</a></li>
        </ul>
      </div>
    </div>
    <div class="layui-body">内容区域</div>
  </div>
  <script src="https://cdn.staticfile.org/layui/2.5.4/layui.js"></script>
  <script>
    layui.use('element', function() {
      var element = layui.element;
    });
  </script>
</body>
</html>

Dans cet exemple, nous créons la structure de base d'un système d'administration backend avec une barre de navigation supérieure et des barres latérales. La partie menu utilise le composant Nav et le composant Tree de Layui. Comme vous pouvez le voir, il y a trois sous-menus sous le menu 2.

Dans le développement réel, nous devons générer dynamiquement des données de menu en fonction des besoins réels du système de gestion backend. Vous pouvez obtenir des données de menu en arrière-plan via des requêtes Ajax, puis restituer les données de menu sur la page.

Ce qui suit est un exemple de données de menu :

var menuData = [
  {name: '菜单1', link: ''},
  {name: '菜单2', link: '', children: [
    {name: '子菜单1', link: ''},
    {name: '子菜单2', link: ''},
    {name: '子菜单3', link: ''}
  ]},
  {name: '菜单3', link: ''}
];

Ensuite, nous utilisons le composant Nav et le composant Tree de Layui pour générer dynamiquement le menu.

Tout d'abord, nous devons modifier la partie menu dans le fichier HTML comme suit :

<div class="layui-side">
  <div class="layui-side-scroll">
    <ul class="layui-nav layui-nav-tree" lay-filter="test" id="menuNav">
    </ul>
  </div>
</div>

Ensuite, ajoutez le contenu suivant dans le code JavaScript :

layui.use(['element', 'nav'], function() {
  var element = layui.element;
  var nav = layui.nav;

  var menuHtml = '';
  for (var i = 0; i < menuData.length; i++) {
    menuHtml += '<li class="layui-nav-item">';
    menuHtml += '<a href="' + menuData[i].link + '">' + menuData[i].name + '</a>';
    if (menuData[i].children) {
      menuHtml += '<dl class="layui-nav-child">';
      for (var j = 0; j < menuData[i].children.length; j++) {
        menuHtml += '<dd><a href="' + menuData[i].children[j].link + '">' + menuData[i].children[j].name + '</a></dd>';
      }
      menuHtml += '</dl>';
    }
    menuHtml += '</li>';
  }

  document.getElementById('menuNav').innerHTML = menuHtml;

  element.init();
  nav.init();
});

La fonction de ce code est de générer dynamiquement les données du menu sur la page et utilisez l'élément et les composants de navigation de Layui sont initialisés.

Grâce aux étapes ci-dessus, nous avons achevé avec succès le développement d'un système de gestion backend prenant en charge les menus à plusieurs niveaux. Dans le développement réel, une expansion et une optimisation appropriées peuvent être réalisées en fonction de besoins spécifiques.

Résumé :

Cet article explique comment utiliser le framework Layui pour développer un système de gestion backend prenant en charge les menus à plusieurs niveaux et fournit des exemples de code spécifiques. En utilisant le composant Nav et le composant Tree de Layui, nous pouvons facilement générer dynamiquement des menus et afficher des menus à plusieurs niveaux. Grâce à cet exemple, je pense que les lecteurs ont une certaine compréhension de l'utilisation de Layui pour développer des systèmes de gestion backend. J'espère que les lecteurs pourront exploiter pleinement les avantages du framework Layui dans le développement réel et développer un système de gestion backend plus efficace et plus pratique.

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!

JavaScript ajax layui html ui

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser Layui pour implémenter les fonctions des composants de calendrier par glisser-déposerArticle suivant：Comment utiliser Layui pour implémenter les fonctions des composants de calendrier par glisser-déposer

Articles Liés

Voir plus