So implementieren Sie mit Layui die Funktion eines Drag-and-Drop-Klassifizierungsmenüs auf mehreren Ebenen

Für die Verwendung von Layui zum Implementieren einer mehrstufigen Drag-and-Drop-Kategoriemenüfunktion sind bestimmte Codebeispiele erforderlich.

1 Einführung in Layui.
Layui ist ein Front-End-UI-Framework, das einfach zu verwenden und hochkompatibel ist und bietet viele häufig verwendete Komponenten und Module, die es Entwicklern ermöglichen, schnell schöne und leistungsstarke Webschnittstellen zu erstellen. Unter diesen ist die Drag-and-Drop-Komponente von Layui ein wichtiger Bestandteil bei der Realisierung der ziehbaren mehrstufigen Klassifizierungsmenüfunktion.

2. Implementieren Sie die ziehbare mehrstufige Klassifizierungsmenüfunktion.
Im Folgenden wird erläutert, wie Sie mit Layui die ziehbare mehrstufige Klassifizierungsmenüfunktion implementieren und spezifische Codebeispiele angeben.

1. Einführen von Layui
   Führen Sie zunächst Layui-bezogene Dateien in die HTML-Datei ein. Es kann auf folgende Weise eingeführt werden, oder es kann entsprechend der tatsächlichen Situation eingeführt werden.

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

2. HTML-Struktur
   Definieren Sie einen div-Container in der HTML-Datei, um ein mehrstufiges Kategoriemenü anzuzeigen. Die Struktur ist wie folgt:

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

3. JavaScript-Code
   Schreiben Sie JavaScript-Code, um die Drag-and-Drop-, Sortier- und Klassifizierungsfunktionen des Menüs zu implementieren. Der spezifische Code lautet wie folgt:

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. Menüdaten dynamisch generieren
   Um die mehrstufige Klassifizierungsmenüfunktion zu implementieren, müssen wir Daten vom Backend abrufen und Menüinhalte basierend auf den Daten dynamisch generieren. Die Backend-Schnittstelle kann über AJAX angefordert werden und die Menüdaten werden in der Callback-Funktion generiert. Der spezifische Code lautet wie folgt:

$.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. Implementieren Sie die Drag-and-Drop-Speicherfunktion des Menüs.
   Wenn der Menüknoten gezogen und sortiert wird, müssen wir die neue Reihenfolge im Backend speichern. Daten können über AJAX-Anfragen an die Backend-Schnittstelle gesendet und in der Success-Callback-Funktion gespeichert werden. Der spezifische Code lautet wie folgt:

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. Zusammenfassung
In diesem Artikel werden die Schritte zur Verwendung von Layui zum Implementieren einer ziehbaren mehrstufigen Klassifizierungsmenüfunktion vorgestellt und spezifische Codebeispiele aufgeführt. Mithilfe der Drag-and-Drop-Komponente von Layui können wir problemlos ein ziehbares mehrstufiges Kategoriemenü implementieren und die Sortier- und Speicherfunktionen des Menüs realisieren. Ich hoffe, dass dieser Artikel den Lesern beim Erlernen und Verwenden von Layui hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit Layui die Funktion eines Drag-and-Drop-Klassifizierungsmenüs auf mehreren Ebenen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!