ホームページ > 記事 > ウェブフロントエンド > Layui フレームワークを使用して、マルチレベル メニューをサポートするバックエンド管理システムを開発する方法
Layui フレームワークを使用して、マルチレベル メニューをサポートするバックエンド管理システムを開発する方法
- WBOYオリジナル
- 2023-10-26 12:33:13756ブラウズ
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 サイトの他の関連記事を参照してください。