How to use Layui to implement drag-and-drop multi-level classification menu function

How to use Layui to implement a drag-and-drop multi-level classification menu function requires specific code examples

1. Introduction to Layui
Layui is a simple and easy to use , the front-end UI framework with strong compatibility provides many commonly used components and modules, allowing developers to quickly build beautiful and powerful web interfaces. Among them, Layui's drag and drop component is an important part of realizing the draggable multi-level classification menu function.

2. Implement the draggable multi-level classification menu function
The following will introduce how to use Layui to implement the draggable multi-level classification menu function, and give specific code examples.

1. Introduce Layui
   First, introduce Layui related files in the HTML file. It can be introduced in the following ways, or it can be introduced according to the actual situation.

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

2. HTML structure
   Define a div container in the HTML file to display a multi-level category menu. The structure is as follows:

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

3. JavaScript code
   Write JavaScript code to realize the drag-and-drop, sorting and classification functions of the menu. The specific code is as follows:

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. Dynamic generation of menu data
   In order to realize the multi-level classification menu function, we need to obtain data from the backend and dynamically generate menu content based on the data. The backend interface can be requested through AJAX and the menu data is generated in the callback function. The specific code is as follows:

$.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. Implementing the drag-and-drop saving function of the menu
   When the menu nodes are dragged and sorted, we need to save the new order to the backend. Data can be sent to the backend interface through AJAX requests and saved in the success callback function. The specific code is as follows:

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. Summary
This article introduces the steps of using Layui to implement the drag-and-drop multi-level classification menu function, and gives specific code examples. By using the Layui drag and drop component, we can easily implement a draggable multi-level category menu and realize the sorting and saving functions of the menu. I hope this article will be helpful to readers learning and using Layui.

The above is the detailed content of How to use Layui to implement drag-and-drop multi-level classification menu function. For more information, please follow other related articles on the PHP Chinese website!