Comment utiliser Layui pour implémenter la fonction de menu arborescent déplaçable

Comment utiliser Layui pour implémenter une fonction de menu arborescent déplaçable

Présentation :
Layui est un framework frontal simple et facile à utiliser qui fournit une multitude de composants et de plug-ins pour permettre aux développeurs de créer rapidement pages. Cet article explique comment utiliser Layui pour implémenter une fonction de menu arborescent déplaçable. Nous utiliserons le composant d'arborescence fourni par Layui et le développerons avec un plug-in glisser-déposer pour implémenter la fonction de tri par glisser-déposer du menu arborescent.

1. Présenter les ressources associées
   Tout d'abord, nous devons présenter les fichiers de ressources associés de Layui, y compris les fichiers de framework Layui et les fichiers de style associés.

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

2. Créer un menu arborescent
   En HTML, nous pouvons créer un menu arborescent grâce au composant arbre de Layui. La structure spécifique du menu peut être conçue en fonction des besoins réels.

<div id="tree"></div>

<script>
layui.use('tree', function(){
  var tree = layui.tree;
  
  var data = [
    {
      title: '节点1',
      id: 1,
      children: [
        {
          title: '子节点1',
          id: 11
        },
        {
          title: '子节点2',
          id: 12
        }
      ]
    },
    {
      title: '节点2',
      id: 2,
      children: [
        {
          title: '子节点3',
          id: 21
        },
        {
          title: '子节点4',
          id: 22
        }
      ]
    }
  ];
  
  tree.render({
    elem: '#tree',
    data: data,
    click: function(obj){
      // 点击节点触发的回调函数
    }
  });
});
</script>

3. Ajouter une fonction glisser-déposer
   Pour implémenter la fonction glisser-déposer, vous devez introduire le plug-in glisser-déposer et définir la fonction de rappel par glisser-déposer dans le menu arborescent.

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script>
layui.use(['tree', 'layer'], function(){
  var tree = layui.tree;
  var layer = layui.layer;
  
  var data = [
    // 树形菜单数据...
  ];
  
  tree.render({
    elem: '#tree',
    drag: true, // 开启拖拽功能
    data: data,
    click: function(obj){
      // 点击节点触发的回调函数
    },
    dragend: function(obj){
      // 拖拽完成后触发的回调函数
      // obj.item为拖拽的节点数据
      // obj.target为拖拽的目标节点数据
      var item = obj.item;
      var target = obj.target;
      
      // 获取拖拽节点的id和目标节点的id
      var itemId = item.id;
      var targetId = target.id;
      
      // 将拖拽节点移动到目标节点下
      // 请根据实际需求，自行编写移动节点的逻辑
      // ...
      
      layer.msg('节点 "' + item.title + '" 已成功移动到 "' + target.title + '" 之下');
    }
  });
});
</script>

4. Améliorer la logique des nœuds mobiles
   Selon les besoins réels, nous devons améliorer la logique des nœuds mobiles. La méthode de mise en œuvre spécifique peut être conçue en fonction des besoins du projet. Ce qui suit ne fournit qu'un exemple simple :

dragend: function(obj){
  var item = obj.item;
  var target = obj.target;
  
  // 获取拖拽节点的id和目标节点的id
  var itemId = item.id;
  var targetId = target.id;
  
  $.ajax({
    url: 'moveNode',
    type: 'POST',
    data: {
      itemId: itemId,
      targetId: targetId
    },
    success: function(data){
      // 根据服务器返回的数据，
      // 更新树形菜单的结构或重新渲染树形菜单
      // ...
    },
    error: function(){
      layer.msg('移动节点失败');
    }
  });
}

5. Résumé
   En utilisant le composant arborescent de Layui et le plug-in glisser-déposer, nous pouvons facilement implémenter un Fonctions de menu en forme d'arbre déplaçable. Dans les projets réels, il peut être étendu et personnalisé en fonction des besoins pour améliorer encore l'expérience utilisateur. J'espère que cet article vous sera utile et je vous souhaite une bonne programmation !

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!