jQueryでZTreeを使用する際に用いる方法

jQueryでは、ztreeはjQueryをベースにしたツリープラグインで、Webページにツリー構造のデータを表現するために使用されます。ノードの展開/縮小、ノードの選択/選択解除、ノードのCRUD、非同期データロードなど、さまざまな機能をサポートします。

ztreeのよくある利用方法を以下に示します

1. 木を初期化されました：

$(document).ready(function(){
    var zTreeObj;
    var setting = {
        data: {
            simpleData: {
                enable: true
            }
        }
    };
    var zNodes = [
        { id:1, pId:0, name:"父节点1"},
        { id:11, pId:1, name:"子节点1"},
        { id:12, pId:1, name:"子节点2"}
    ];
    zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

1. 選択肢のあるノードの取得

var nodes = zTreeObj.getSelectedNodes();
if (nodes.length > 0) {
    console.log("选中的节点名称：" + nodes[0].name);
}

1. ノードを追加：

var newNode = { id:2, pId:1, name:"子节点3"};
zTreeObj.addNodes(nodes[0], newNode);

1. ノードを削除する：

zTreeObj.removeNode(nodes[0]);

1. ノードをアップデートする

nodes[0].name = "新名称";
zTreeObj.updateNode(nodes[0]);

上記は ZTree の基本的な使用法の一部であり、他にもさまざまなニーズに対応するための機能や設定が多数あります。より詳しい使用方法については、公式ドキュメントを参照するか、関連するチュートリアルを検索してください。