Layui フレームワークを使用して、マルチレベルメニューをサポートするバックエンド管理システムを開発する方法-jsチュートリアル-php.cn

Layui フレームワークを使用して、マルチレベルメニューをサポートするバックエンド管理システムを開発する方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

リリース： 2023-10-26 12:33:13

オリジナル

917 人が閲覧しました

Layui フレームワークを使用して、マルチレベルメニューをサポートするバックエンド管理システムを開発する方法

Layui は、豊富なコンポーネントとシンプルさを備えた軽量のフロントエンド UI フレームワークです。バックエンド管理システムの開発に非常に適した構文です。この記事では、Layui フレームワークを使用してマルチレベルメニューをサポートするバックエンド管理システムを開発する方法を紹介し、具体的なコード例を示します。

まず、Layui フレームワークをプロジェクトに導入する必要があります。 Layui はソースファイルを直接ダウンロードするか、CDN を利用して導入できます。次に、バックエンド管理システムのホームページとして HTML ファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>后台管理系统</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.4/css/layui.css">
</head>
<body>
  <div class="layui-layout layui-layout-admin">
    <div class="layui-header">
      <div class="layui-logo">后台管理系统</div>
    </div>
    <div class="layui-side">
      <div class="layui-side-scroll">
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
          <li class="layui-nav-item"><a href="">菜单1</a></li>
          <li class="layui-nav-item layui-nav-itemed">
            <a class="" href="">菜单2</a>
            <dl class="layui-nav-child">
              <dd><a href="">子菜单1</a></dd>
              <dd><a href="">子菜单2</a></dd>
              <dd><a href="">子菜单3</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item"><a href="">菜单3</a></li>
        </ul>
      </div>
    </div>
    <div class="layui-body">内容区域</div>
  </div>
  <script src="https://cdn.staticfile.org/layui/2.5.4/layui.js"></script>
  <script>
    layui.use('element', function() {
      var element = layui.element;
    });
  </script>
</body>
</html>

ログイン後にコピー

この例では、トップナビゲーションバーとサイドバーを備えたバックエンド管理システムの基本構造を作成します。メニュー部分はLayuiのNavコンポーネントとTreeコンポーネントを使用しています。ご覧のとおり、メニュー 2 の下には 3 つのサブメニューがあります。

実際の開発では、バックエンド管理システムの実際のニーズに基づいてメニューデータを動的に生成する必要があります。 Ajax リクエストを通じてバックグラウンドからメニューデータを取得し、そのメニューデータをページにレンダリングできます。

以下はメニューデータの例です:

var menuData = [
  {name: '菜单1', link: ''},
  {name: '菜单2', link: '', children: [
    {name: '子菜单1', link: ''},
    {name: '子菜单2', link: ''},
    {name: '子菜单3', link: ''}
  ]},
  {name: '菜单3', link: ''}
];

ログイン後にコピー

次に、Layui の Nav コンポーネントと Tree コンポーネントを使用して、メニューを動的に生成します。

まず、HTML ファイルのメニュー部分を次のように変更する必要があります:

<div class="layui-side">
  <div class="layui-side-scroll">
    <ul class="layui-nav layui-nav-tree" lay-filter="test" id="menuNav">
    </ul>
  </div>
</div>

ログイン後にコピー

次に、JavaScript コードに次の内容を追加します:

layui.use(['element', 'nav'], function() {
  var element = layui.element;
  var nav = layui.nav;

  var menuHtml = '';
  for (var i = 0; i < menuData.length; i++) {
    menuHtml += '<li class="layui-nav-item">';
    menuHtml += '<a href="' + menuData[i].link + '">' + menuData[i].name + '</a>';
    if (menuData[i].children) {
      menuHtml += '<dl class="layui-nav-child">';
      for (var j = 0; j < menuData[i].children.length; j++) {
        menuHtml += '<dd><a href="' + menuData[i].children[j].link + '">' + menuData[i].children[j].name + '</a></dd>';
      }
      menuHtml += '</dl>';
    }
    menuHtml += '</li>';
  }

  document.getElementById('menuNav').innerHTML = menuHtml;

  element.init();
  nav.init();
});

ログイン後にコピー

関数このコードは、メニューデータがページ上で動的に生成され、Layui の要素とナビゲーションコンポーネントを使用して初期化されることを目的としています。

上記の手順により、多階層メニューをサポートするバックエンド管理システムの開発が完了しました。実際の開発では、ニーズに応じて適切な拡張や最適化を行うことができます。

概要:

この記事では、Layui フレームワークを使用してマルチレベルメニューをサポートするバックエンド管理システムを開発する方法を紹介し、具体的なコード例を示します。 Layui の Nav コンポーネントと Tree コンポーネントを使用すると、簡単にメニューを動的に生成し、複数レベルのメニューを表示できます。この例を通じて、読者は Layui を使用してバックエンド管理システムを開発することについてある程度理解できたと思います。読者の皆様には、実際の開発において Layui フレームワークの利点を最大限に活用して、より効率的で便利なバックエンド管理システムを開発していただければ幸いです。

以上がLayui フレームワークを使用して、マルチレベルメニューをサポートするバックエンド管理システムを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。