jQuery での zTree ツリー プラグインの使用の共有

共有手順:

プロジェクトは、バックグラウンドから返されたデータをツリービューの形式で表示し、ノードをクリックして右側の ul にノード情報を追加する必要があります。これは後で取得して使用されます。その後の提出では、ノード情報の非同期ロードを実現できる zTree プラグインが選択されました。このプラグインがほぼすべてのニーズを満たすのに十分であることが証明されました。多くの人の共有と公式 API ドキュメントを組み合わせて、最終的にこの機能を実現しました。ここで私が学んだことの概要を共有します。 zTree のデフォルトの効果に加えて、いくつかの実用的な操作が追加されました。 API; アコーディオン効果を含む; 親ノードをクリックして効果を展開; 第 1 レベルの子ノード番号表示効果をクリックします。 css コード

1     <link rel="stylesheet" href="./zTree_v3-master/css/zTreeStyle/zTreeStyle.css">
2     <script type="text/javascript" src="./jquery-1.9.1.js"></script>
3     <script type="text/javascript" src="./zTree_v3-master/js/jquery.ztree.all.min.js"></script>

js コード

<div class="box">
        <ul id="treeDemo" class="ztree"></ul>
        <ul id="ulright">
            <li style="text-align: center;background-color: #ddd;border-bottom: 1px dashed">已选择</li>
        </ul>
    </div>

バックエンドの php コード; 私は純粋にフロントエンドであり、バックエンドのコードは簡単にしか記述できません;

ul,li,body{
        margin: 0;
        padding: 0;
    }
    .ztree li span.node_name {
        font-size: 16px;
    }
    .box{
        width: 500px;
        margin:10px auto;
        border:3px solid #ccc;
        padding: 20px;
        border-bottom: none;
    }
    #treeDemo{
        width: 200px;
        display: inline-block;
        background-color: #f1f1f1;
        min-height: 200px;
    }
    #ulright{
        width: 200px;
        margin-left: 50px;
        min-height: 200px;
        border:1px solid #ccc;
        display: inline-block;
        vertical-align: top;
        background-color: #eeeee8;
    }
    #ulright li{
        width: 100%;
        height: 30px;
        list-style: none;
        line-height: 30px;
        margin-bottom: 3px;
        background-color: #00b6ba;
        padding-left: 10px;
        box-sizing: border-box;

    }


    /**/
    .ztree li a.curSelectedNode{
        background-color: transparent;
        border:#00b6ba;
    }
    .ztree li span.node_name{
        font-size: 18px;
        line-height: 18px;
        color: #000;
    }
    .ztree li a{
       padding: 5px;
       vertical-align: middle;
    }
    .ztree li a:hover{
        text-decoration: none;
    }
    .ztree li span.button.chk{
        margin: 9px 3px;
    }

ほとんどの js コードには詳細な API があり、zTree にあります。公式ウェブサイト 公式 API ドキュメントを参照してください。コードはサーバー環境で実行する必要があります

最終的な栗のレンダリング

以上がjQuery での zTree ツリー プラグインの使用の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。