Layuiを使用してドラッグ可能な多レベル分類メニュー機能を実装する方法

Layui を使用してドラッグ アンド ドロップのマルチレベル分類メニュー機能を実装する方法には、特定のコード例が必要です

1. Layui の概要
Layui はシンプルで使いやすい、強力な互換性を備えたフロントエンド UI フレームワークには、一般的に使用されるコンポーネントとモジュールが多数用意されており、開発者は美しく強力な Web インターフェイスを迅速に構築できます。その中でも、Layui のドラッグ アンド ドロップ コンポーネントは、ドラッグ可能な多レベル分類メニュー機能を実現する重要な部分です。

2. ドラッグ可能な多段階分類メニュー機能の実装
Layui を使用してドラッグ可能な多段階分類メニュー機能を実装する方法と、具体的なコード例を紹介します。

1. Layui の導入
   まず、Layui 関連ファイルを HTML ファイルに導入します。以下のような方法で導入することもできますし、実情に応じて導入することもできます。

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

2. HTML 構造
   複数レベルのカテゴリ メニューを表示するには、HTML ファイル内に div コンテナを定義します。構造は次のとおりです。

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

3. JavaScript コード
   メニューのドラッグ アンド ドロップ、並べ替え、分類機能を実現する JavaScript コードを記述します。具体的なコードは以下の通りです。

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. メニューデータの動的生成
   多段階分類メニュー機能を実現するには、バックエンドからデータを取得し、動的に実行する必要があります。データに基づいてメニューコンテンツを生成します。バックエンド インターフェイスは AJAX を通じてリクエストでき、メニュー データはコールバック関数で生成されます。具体的なコードは次のとおりです。

$.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. メニューのドラッグ アンド ドロップ保存機能の実装
   メニュー ノードをドラッグして並べ替えるとき、新しいノードを保存する必要があります。バックエンドに命令します。データは、AJAX リクエストを通じてバックエンド インターフェイスに送信され、成功コールバック関数に保存されます。具体的なコードは次のとおりです。

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. 概要
この記事では、Layui を使用してドラッグ アンド ドロップのマルチレベル分類メニュー機能を実装する手順を紹介し、具体的なコードを示します。例。 Layui ドラッグ アンド ドロップ コンポーネントを使用すると、ドラッグ可能な複数レベルのカテゴリ メニューを簡単に実装し、メニューの並べ替えと保存機能を実現できます。この記事が、Layui を学習および使用する読者にとって役立つことを願っています。

以上がLayuiを使用してドラッグ可能な多レベル分類メニュー機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。