JQuery zTree は、JQuery をベースにしたツリー コントロールで、使いやすく、柔軟性、効率性、互換性が高く、Web 開発には欠かせないツールの 1 つです。この記事では、この強力なツールをより効果的に使用できるように、インストール、初期化、構成、イベントなどを含む、jQuery zTree の使用チュートリアルを詳しく紹介します。
1. インストール
jQuery zTree コントロールを使用するには、まず対応する JS ファイルと CSS ファイルを導入する必要があります。ファイルの最新バージョンは、zTree の公式 Web サイト (http://www.ztree.me) からダウンロードするか、一般的に使用される CDN (https://cdn.bootcss.com など) から入手できます。 CSS および JS ファイルをインポートするためのコードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>zTree Demo</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/zTree.v3.5.35/zTreeStyle/zTreeStyle.min.css">
</head>
<body>
<!--页面内容-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/zTree.v3.5.35/jquery.ztree.all.min.js"></script>
<script>
//JS代码
</script>
</body>
</html>
ログイン後にコピー
2. 初期化
ファイルが正常に導入されたら、zTree コントロールの使用を開始できます。 zTree コントロールを初期化するには、zTree 関数を呼び出し、いくつかのパラメーターを渡してコントロールのプロパティを構成する必要があります。たとえば、次のコードです。
$(document).ready(function(){
var setting = {
data: {
simpleData: {
enable: true
}
}
};
var zNodes = [
{ id:1, pId:0, name:"节点1" },
{ id:2, pId:0, name:"节点2" }
];
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});ログイン後にコピー
上記のコードは、単純なツリー メニューを実装します。 .ready() は、ページがロードされた後にのみ初期化コードが実行されることを意味します。設定には、データ形式、スタイル、イベントなどを含む zTree コントロールの構成情報が含まれます。zNodes は、ツリー メニューのデータ ソースを格納する配列です。初期化中に、zTree コントロールは $.fn.zTree.init() メソッドによって初期化されます。$() は、ID、クラス、ラベルなどに基づいて要素を選択できる JQuery セレクターを表します。
3. 構成
上記のコードの設定変数は、zTree コントロールの構成の中核であり、必要に応じてさまざまなプロパティを設定できます。以下に一般的な設定項目をいくつか示します。
- data
data は、ツリー メニューのデータ形式を設定するために使用される内部設定項目です。以下は簡単なデータ形式です:
var zNodes = [
{
name: "节点1",
children: [
{ name: "节点1.1" },
{ name: "节点1.2" }
]
},
{
name: "节点2",
children: [
{ name: "节点2.1" }
]
}
];ログイン後にコピー
このうち、各ノードには名前 (ノード名)、子 (子ノード) などの属性を含めることができます。
- check
checkは、ツリーメニューのチェックボックス機能を設定するための内部設定項目です。 check.enable を設定してチェック ボックス機能を有効にし、check.chkboxType を設定してチェック ボックスのタイプを設定できます。
var setting = {
check: {
enable: true,
chkboxType: { "Y": "", "N": "" }
}
};ログイン後にコピー
chkboxType の値は { "Y" : "s", "N" : になります。 " s" } は、すべてのノード (親ノードのみ) にチェック ボックスがあることを意味します。 { "Y" : "ps", "N" : "ps" } は、リーフ以外のノードのみにチェック ボックスがあることを意味します。 { "Y" : "ps", "N" : "p" } 非リーフ ノードと最終レベルのリーフ ノードのみにチェック ボックスがあることを示します。
- callback
callback は、ツリー メニュー イベントを構成するために使用される内部構成アイテムです。 onClick、onDblClick、onCheck などのイベントを設定できます。
var setting = {
callback: {
onClick: function(event, treeId, treeNode) {
alert(treeNode.name);
},
onDblClick: function(event, treeId, treeNode) {
alert(treeNode.name + " - 双击事件");
},
onCheck: function(event, treeId, treeNode) {
alert(treeNode.name + " - " + (treeNode.checked ? "选中" : "取消选中"));
}
}
};ログイン後にコピー
このうち、onClick イベントはノードがクリックされたときにトリガーされ、onDblClick はノードがダブルクリックされたときにトリガーされ、onCheck はノードがクリックされたときにトリガーされます。ノードのチェックボックスがオンまたはオフになります。
- view
view は、ツリー メニューのスタイルを構成するために使用される内部構成アイテムです。 fontCss、showIcon などのスタイルを設定できます。
var setting = {
view: {
fontCss: { "font-weight": "bold", "color": "#055" },
showIcon: false
}
};ログイン後にコピー
このうち、fontCss はフォント スタイルの設定に使用され、showIcon はアイコンを表示するかどうかの設定に使用されます。
4. イベント
設定でのイベントの設定に加えて、zTree コントロールにはいくつかの組み込みイベント関数もあります。たとえば、zTreeOnClick、zTreeOnCheck などは、ノードのクリック イベントとチェック ボックスの選択イベントをバインドするために使用されます。使用法は次のようになります:
$(document).ready(function(){
var setting = {
callback: {
onClick: zTreeOnClick,
onCheck: zTreeOnCheck
}
};
var zNodes = [
{ id:1, pId:0, name:"节点1" },
{ id:2, pId:0, name:"节点2" }
];
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
function zTreeOnClick(event, treeId, treeNode) {
alert(treeNode.name);
}
function zTreeOnCheck(event, treeId, treeNode) {
alert(treeNode.name + " - " + (treeNode.checked ? "选中" : "取消选中"));
}ログイン後にコピー
上記のコードでは、zTreeOnClick と zTreeOnCheck はカスタム イベント関数です。タグ Bind ノードのクリック イベントと、コールバック関数を介したチェック ボックスの選択イベント。
5. 概要
上記の紹介を通じて、読者はインストール、初期化、構成、イベントなどを含む jQuery zTree の基本的な使用法を理解できたと思います。実際の開発では、必要に応じてさまざまなプロパティを設定して、より豊富な機能を実現できます。同時に、zTree コントロール自体は強力ですが、パフォーマンスの問題などのいくつかの欠点もあり、実際の開発プロセスで適切に処理する必要があることにも注意する必要があります。
以上がjQuery ztreeの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
