Cara menggunakan Layui untuk melaksanakan fungsi menu klasifikasi berbilang peringkat seret dan lepas

Cara menggunakan Layui untuk melaksanakan fungsi menu kategori berbilang peringkat seret dan lepas memerlukan contoh kod khusus

1 Pengenalan kepada Layui
Layui ialah rangka kerja UI bahagian hadapan yang mudah digunakan dan sangat serasi. , dan menyediakan banyak Komponen dan modul yang biasa digunakan membolehkan pembangun membina antara muka web yang cantik dan berkuasa dengan cepat. Antaranya, komponen seret dan lepas Layui merupakan bahagian penting dalam merealisasikan fungsi menu klasifikasi pelbagai peringkat boleh seret.

2. Laksanakan fungsi menu klasifikasi berbilang peringkat boleh seret
Berikut akan memperkenalkan cara menggunakan Layui untuk melaksanakan fungsi menu klasifikasi berbilang peringkat boleh seret, dan memberikan contoh kod khusus.

1. Perkenalkan Layui
   Mula-mula, perkenalkan fail berkaitan Layui dalam fail HTML. Ia boleh diperkenalkan dengan cara berikut, atau ia boleh diperkenalkan mengikut situasi sebenar.

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

2. Struktur HTML
   Tentukan bekas div dalam fail HTML untuk memaparkan menu kategori berbilang peringkat. Strukturnya adalah seperti berikut:

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

3. Kod JavaScript
   Tulis kod JavaScript untuk melaksanakan fungsi seret dan lepas, pengisihan dan pengelasan menu. Kod khusus adalah seperti berikut:

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. Menjana data menu secara dinamik
   Untuk melaksanakan fungsi menu klasifikasi berbilang peringkat, kita perlu mendapatkan data dari bahagian belakang dan menjana kandungan menu secara dinamik berdasarkan data. Antara muka bahagian belakang boleh diminta melalui AJAX dan data menu dijana dalam fungsi panggil balik. Kod khusus adalah seperti berikut:

$.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. Laksanakan fungsi menyimpan seret dan lepas menu
   Apabila nod menu diseret dan diisih, kita perlu menyimpan pesanan baharu ke bahagian belakang. Data boleh dihantar ke antara muka belakang melalui permintaan AJAX dan disimpan dalam fungsi panggil balik kejayaan. Kod khusus adalah seperti berikut:

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. Ringkasan
Artikel ini memperkenalkan langkah-langkah menggunakan Layui untuk melaksanakan fungsi menu pengelasan berbilang peringkat yang boleh diseret dan memberikan contoh kod khusus. Dengan menggunakan komponen seret dan lepas Layui, kami boleh melaksanakan menu kategori berbilang peringkat yang boleh diseret dengan mudah dan merealisasikan fungsi pengisihan dan penjimatan menu. Saya harap artikel ini dapat membantu pembaca mempelajari dan menggunakan Layui.

Atas ialah kandungan terperinci Cara menggunakan Layui untuk melaksanakan fungsi menu klasifikasi berbilang peringkat seret dan lepas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!