jQuery ztreeの使い方-フロントエンドQ&A-php.cn

jQuery ztreeの使い方

PHPz

リリース： 2023-04-26 10:50:06

オリジナル

771 人が閲覧しました

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 サイトの他の関連記事を参照してください。