Comment utiliser Layui pour implémenter la fonction de menu de classification à plusieurs niveaux par glisser-déposer

Comment utiliser Layui pour implémenter une fonction de menu de catégories multi-niveaux par glisser-déposer nécessite des exemples de code spécifiques

1 Introduction à Layui
Layui est un framework d'interface utilisateur frontal facile à utiliser et hautement compatible. , et fournit de nombreux composants et modules couramment utilisés permettant aux développeurs de créer rapidement des interfaces Web belles et puissantes. Parmi eux, le composant glisser-déposer de Layui est un élément important de la réalisation de la fonction de menu de classification multi-niveaux déplaçable.

2. Implémenter la fonction de menu de classification multi-niveaux déplaçable
Ce qui suit présentera comment utiliser Layui pour implémenter la fonction de menu de classification multi-niveaux déplaçable et donnera des exemples de code spécifiques.

1. Présentez Layui
   Tout d'abord, introduisez les fichiers liés à Layui dans le fichier HTML. Il peut être introduit des manières suivantes, ou en fonction de la situation réelle.

<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.js"></script>

2. Structure HTML
   Définissez un conteneur div dans le fichier HTML pour afficher un menu de catégories à plusieurs niveaux. La structure est la suivante :

<div id="dragMenu">
  <ul class="layui-tree">
    <!-- 这里是动态生成的菜单内容 -->
  </ul>
</div>

3. Code JavaScript
   Écrire du code JavaScript pour implémenter les fonctions glisser-déposer, tri et classification du menu. Le code spécifique est le suivant :

layui.use(['tree', 'util'], function(){
  var tree = layui.tree,
      util = layui.util,
      $ = layui.$;
  
  // 渲染菜单
  tree({
    elem: '#dragMenu',
    nodes: [/* 这里是动态生成的菜单数据 */],
    click: function(node){
      // 菜单点击事件
      console.log(node);
    }
  });
  
  // 监听拖拽排序事件
  tree.on('drag(tree)', function(obj){
    console.log(obj); // 得到拖拽后的数据
  });
});

4. Générer dynamiquement des données de menu
   Afin d'implémenter la fonction de menu de classification multi-niveaux, nous devons obtenir des données du backend et générer dynamiquement le contenu du menu en fonction des données. L'interface backend peut être demandée via AJAX et les données du menu sont générées dans la fonction de rappel. Le code spécifique est le suivant :

$.ajax({
  url: 'menuData.php',
  type: 'GET',
  dataType: 'json',
  success: function(data){
    // 将数据转为Layui的菜单数据格式
    var menuData = [];
    for (var i = 0; i < data.length; i++) {
      var node = {
        title: data[i].name,
        id: data[i].id,
        children: []
      };
      menuData.push(node);
    }
    
    // 更新菜单
    tree.reload('dragMenu', {
      data: menuData
    });
  }
});

5. Implémentez la fonction de sauvegarde par glisser-déposer du menu
   Lorsque le nœud du menu est glissé et trié, nous devons enregistrer la nouvelle commande dans le backend. Les données peuvent être envoyées à l'interface backend via des requêtes AJAX et enregistrées dans la fonction de rappel de réussite. Le code spécifique est le suivant :

tree.on('drag(tree)', function(obj){
  var newData = []; // 保存拖拽后的新数据
  
  // 循环遍历所有拖拽后的节点
  for (var i = 0; i < obj.changed.length; i++) {
    var node = obj.changed[i];
    newData.push({
      id: node.id,
      sort: i + 1 // 拖拽后的顺序
    });
  }
  
  // 发送数据到后端进行保存
  $.ajax({
    url: 'saveMenuData.php',
    type: 'POST',
    dataType: 'json',
    data: JSON.stringify(newData),
    success: function(result){
      // 处理保存结果
      if (result.code === 0) {
        console.log('保存成功');
      } else {
        console.log('保存失败：' + result.msg);
      }
    }
  });
});

3. Résumé
Cet article présente les étapes d'utilisation de Layui pour implémenter une fonction de menu de classification multi-niveaux déplaçable et donne des exemples de code spécifiques. En utilisant le composant glisser-déposer Layui, nous pouvons facilement implémenter un menu de catégories à plusieurs niveaux déplaçable et réaliser les fonctions de tri et de sauvegarde du menu. J'espère que cet article sera utile aux lecteurs qui apprennent et utilisent Layui.

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!