JS コンポーネント シリーズ -- ブートストラップ ツリー コントロールの使用体験sharing_html/css_WEB-ITnose

はじめに: 多くの場合、プロジェクトではツリーを使用する必要があります。階層関係を表示するためだけのツリーもあれば、階層関係を表示および編集するためのツリーもあれば、項目を選択して選択した項目を別の場所で呼び出すためのツリーもあります。いずれにしても、ツリー コントロールは多くのプロジェクトにおいて不可欠なコンポーネントの 1 つです。今日、ブロガーは、誰もが最適なコントロールを見つけられるようにしたいと考えて、自身の経験とインターネット上で見つけたいくつかの優れたツリー コントロールに基づいてここで共有する予定です。同じ文も同じです: 最適な制御はなく、最も適切な制御があるだけです。

1. JQuery ツリー コントロール

JQuery ツリー コントロールは、JQuery+bootstrap に基づいた非常に軽量なコントロールであり、その影はインターネット上の多くの場所で見ることができます。シンプルな機能と優れたユーザーエクスペリエンスを備えています。単純な階層関係を表示する方が実用的ですが、ノードの追加、削除、変更を行う必要がある場合は、自分でカプセル化する必要がある場合があります。

1

コルプスすべてをexpand expandブートストラップコンポーネントで十分です。

<link href="~/Content/Tree1/css/bootstrap.min.css" rel="stylesheet" />    <link href="~/Content/Tree1/css/style.css" rel="stylesheet" />    <script src="~/Scripts/jquery-1.10.2.js"></script>    <script type="text/javascript">　　$(function(){    　　$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');    　　$('.tree li.parent_li > span').on('click', function (e) {       　　 var children = $(this).parent('li.parent_li').find(' > ul > li');        　　if (children.is(":visible")) {            　　children.hide('fast');            　　$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');        　　} else {            　　children.show('fast');            　　$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');        　　}        　　e.stopPropagation();    　　});　　});    </script>

<div class="tree well">        <ul>            <li>                <span><i class="icon-folder-open"></i> 顶级节点1</span> <a href="">Goes somewhere</a>                <ul>                    <li>                        <span><i class="icon-minus-sign"></i> 一级节点1</span> <a href=""></a>                        <ul>                            <li>                                <span><i class="icon-leaf"></i> 二级节点1_1</span> <a href=""></a>                            </li>                        </ul>                    </li>                    <li>                        <span><i class="icon-minus-sign"></i> 一级节点2</span> <a href=""></a>                        <ul>                            <li>                                <span><i class="icon-leaf"></i>二级节点2_1</span> <a href=""></a>                            </li>                            <li>                                <span><i class="icon-minus-sign"></i> 二级节点2_2</span> <a href=""></a>                                <ul>                                    <li>                                        <span><i class="icon-minus-sign"></i>三级节点2_1</span> <a href=""></a>                                        <ul>                                            <li>                                                <span><i class="icon-leaf"></i>四级节点2_1</span> <a href=""></a>                                            </li>                                            <li>                                                <span><i class="icon-leaf"></i> 四级节点2_2</span> <a href=""></a>                                            </li>                                        </ul>                                    </li>                                    <li>                                        <span><i class="icon-leaf"></i>三级节点2_2</span> <a href=""></a>                                    </li>                                    <li>                                        <span><i class="icon-leaf"></i> 三级节点2_3</span> <a href=""></a>                                    </li>                                </ul>                            </li>                            <li>                                <span><i class="icon-leaf"></i>二级节点2_3</span> <a href=""></a>                            </li>                        </ul>                    </li>                </ul>            </li>            <li>                <span><i class="icon-folder-open"></i> 顶级节点2</span> <a href=""></a>                <ul>                    <li>                        <span><i class="icon-leaf"></i> 一级节点2_1</span> <a href=""></a>                    </li>                </ul>            </li>        </ul>    </div>

これらのコードはインターネットから直接ダウンロードされます。ノード上のアイコンはスタイルを通じて変更でき、アイコンのスタイルもブートストラップに基づいています。ノードを動的に追加する必要がある場合は、コンポーネントを自分でカプセル化して HTML を作成できます。これは実装が比較的簡単です。上記のことから、このコンポーネントは軽量であることがわかります。ノードを追加、削除、変更、選択する必要がある場合でも、次のコントロールの方が適している可能性がありますので、ご安心ください。

2. ファイル ツリー編集プラグイン Tree

このコンポーネントは、最初のデモンストレーションの後、その効果が大きいと口を揃えて感じました。ツリー状に表示されるので、ノードの追加、削除、変更が簡単に行えます。ノードのスケーリング効果も向上しています。さて、見てみましょう。

1. Tree との最初のミーティング

デフォルトの展開は 1 レベルです

左側の「+」記号をクリックして右側のノードをクリックすると、子ノードが展開されます

マルチレベル展開

左側でノード名を編集できます

Enter キーを押して新しい兄弟ノードを追加し、新しい行を削除してノードを削除します。

Enter キーを押してから Tab キーを押して、新しい子ノードを追加します

非常に強力です。この要素を確認すると、この要素は HTML5 の svg タグを使用して実装されているため、ブラウザーに特定の要件があることがわかります。

3. ユニバーサル ツリー コントロール - zTree

ztree は伝統的なツリー コンポーネントであり、その強力な機能がツリー コントロールの世界でのステータスを決定します。ツリーの表示、編集、またはノードの単一および複数選択のいずれであっても、強力な機能 API を提供します。しかし、そのインターフェースはあまり見栄えが良くないため、多くの企業はそれを使用することに躊躇するでしょう。幸いなことに、フラット スタイルが導入されて以来、ztree は特定の美化も行いました。たとえば、Metro スタイルのコンポーネントはブートストラップ スタイルに非常に似ています。今日は、Metro スタイルの ztree と組み合わせたこのコンポーネントの使用法をいくつか紹介しましょう。

1. コンポーネントの使用法

このコンポーネントは Nuget を通じて直接追加できます。

2. コンポーネント効果

すべてのノードを折りたたむ

ノードを展開する

ノードが選択されています。もちろん、必要に応じて単一の選択に変えることができます。

ノードを追加、削除、変更できます

テキストボックスをクリックしてツリーを表示します

3. コード例

3.1 インターフェースにテキストボックスを直接表示します

引用符で囲む必要がある css ファイル

    <script src="~/Scripts/jquery-1.10.2.js"></script>    <script src="~/Content/bootstrap/js/bootstrap.js"></script>    <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />    <script src="~/Scripts/jquery.ztree.all-3.5.js"></script>    <link href="~/Content/zTree.theme.metro.css" rel="stylesheet" />

page html

 　　<div id="menuContent" class="menuContent" style="width:95%;border:1px solid rgb(170,170,170);z-index:10;">         <ul id="treeDemo" class="ztree" style="margin-top:0; width:100%; height:auto;"></ul>    </div>

Js 初期化

var setting = {    view: {        addHoverDom: addHoverDom,        removeHoverDom: removeHoverDom,        selectedMulti: false    },    check: {        enable: true    },    data: {        simpleData: {            enable: true        }    },    edit: {        enable: false    }};var zNodes = [    { id: 1, pId: 0, name: "父节点1", open: true },    { id: 11, pId: 1, name: "父节点11" },    { id: 111, pId: 11, name: "叶子节点111" },    { id: 112, pId: 11, name: "叶子节点112" },    { id: 113, pId: 11, name: "叶子节点113" },    { id: 114, pId: 11, name: "叶子节点114" },    { id: 12, pId: 1, name: "父节点12" },    { id: 121, pId: 12, name: "叶子节点121" },    { id: 122, pId: 12, name: "叶子节点122" },    { id: 123, pId: 12, name: "叶子节点123" },    { id: 124, pId: 12, name: "叶子节点124" },    { id: 13, pId: 1, name: "父节点13", isParent: true },    { id: 2, pId: 0, name: "父节点2" },    { id: 21, pId: 2, name: "父节点21", open: true },    { id: 211, pId: 21, name: "叶子节点211" },    { id: 212, pId: 21, name: "叶子节点212" },    { id: 213, pId: 21, name: "叶子节点213" },    { id: 214, pId: 21, name: "叶子节点214" },    { id: 22, pId: 2, name: "父节点22" },    { id: 221, pId: 22, name: "叶子节点221" },    { id: 222, pId: 22, name: "叶子节点222" },    { id: 223, pId: 22, name: "叶子节点223" },    { id: 224, pId: 22, name: "叶子节点224" },    { id: 23, pId: 2, name: "父节点23" },    { id: 231, pId: 23, name: "叶子节点231" },    { id: 232, pId: 23, name: "叶子节点232" },    { id: 233, pId: 23, name: "叶子节点233" },    { id: 234, pId: 23, name: "叶子节点234" },    { id: 3, pId: 0, name: "父节点3", isParent: true }];$(document).ready(function () {    $.fn.zTree.init($("#treeDemo"), setting, zNodes);});function addHoverDom(treeId, treeNode) {    var sObj = $("#" + treeNode.tId + "_span");    if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;    var addStr = "<span class='button add' id='addBtn_" + treeNode.tId        + "' title='add node' onfocus='this.blur();'></span>";    sObj.after(addStr);    var btn = $("#addBtn_" + treeNode.tId);    if (btn) btn.bind("click", function () {        var zTree = $.fn.zTree.getZTreeObj("treeDemo");        zTree.addNodes(treeNode, { id: (100 + newCount), pId: treeNode.id, name: "new node" + (newCount++) });        return false;    });};function removeHoverDom(treeId, treeNode) {    $("#addBtn_" + treeNode.tId).unbind().remove();};

3.2 デフォルトでは非表示ですが、イベントがトリガーされるとツリーが表示されます。このシナリオはプロジェクトで非常に一般的であり、通常はツリー ノードを選択するために使用されます。したがって、これについてはブロガーが個別に説明します。

div はデフォルトでは非表示になっています。

　　　　　　　<input type="text" class="form-control" id="txt_ztree" placeholder="点击文本框出现ztree" onclick="showMenu()" />            <div id="menuContent2" class="menuContent" style="display:none;position: absolute;width:95%;border:1px solid rgb(170,170,170);z-index:10;">                <ul id="treeDemo2" class="ztree" style="margin-top:0; width:160px; height:auto;"></ul>            </div>

ツリーを初期化し、jsにshowMenu()メソッドを登録します

var setting2 = {    check: {        enable: true,        chkStyle: "radio",        radioType: "all"    },    view: {        dblClickExpand: false    },    data: {        simpleData: {            enable: true        }    },    callback: {        onClick: onClickNode,        onCheck: onCheck    }};var zNodes = [    { id: 1, pId: 0, name: "父节点1", open: true },    { id: 11, pId: 1, name: "父节点11" },    { id: 111, pId: 11, name: "叶子节点111" },    { id: 112, pId: 11, name: "叶子节点112" },    { id: 113, pId: 11, name: "叶子节点113" },    { id: 114, pId: 11, name: "叶子节点114" },    { id: 12, pId: 1, name: "父节点12" },    { id: 121, pId: 12, name: "叶子节点121" },    { id: 122, pId: 12, name: "叶子节点122" },    { id: 123, pId: 12, name: "叶子节点123" },    { id: 124, pId: 12, name: "叶子节点124" },    { id: 13, pId: 1, name: "父节点13", isParent: true },    { id: 2, pId: 0, name: "父节点2" },    { id: 21, pId: 2, name: "父节点21", open: true },    { id: 211, pId: 21, name: "叶子节点211" },    { id: 212, pId: 21, name: "叶子节点212" },    { id: 213, pId: 21, name: "叶子节点213" },    { id: 214, pId: 21, name: "叶子节点214" },    { id: 22, pId: 2, name: "父节点22" },    { id: 221, pId: 22, name: "叶子节点221" },    { id: 222, pId: 22, name: "叶子节点222" },    { id: 223, pId: 22, name: "叶子节点223" },    { id: 224, pId: 22, name: "叶子节点224" },    { id: 23, pId: 2, name: "父节点23" },    { id: 231, pId: 23, name: "叶子节点231" },    { id: 232, pId: 23, name: "叶子节点232" },    { id: 233, pId: 23, name: "叶子节点233" },    { id: 234, pId: 23, name: "叶子节点234" },    { id: 3, pId: 0, name: "父节点3", isParent: true }];//初始化$(document).ready(function () {    $.fn.zTree.init($("#treeDemo2"), setting2, zNodes);});//显示菜单function showMenu() {    $("#menuContent2").css({ left: "15px", top: "34px" }).slideDown("fast");    $("body").bind("mousedown", onBodyDown);}//隐藏菜单function hideMenu() {    $("#menuContent2").fadeOut("fast");    $("body").unbind("mousedown", onBodyDown);}function onBodyDown(event) {    if (!(event.target.id == "menuBtn" || event.target.id == "menuContent2" || event.target.id == "txt_ztree" || $(event.target).parents("#menuContent2").length > 0)) {        hideMenu();    }}//节点点击事件function onClickNode(e, treeId, treeNode) {    var zTree = $.fn.zTree.getZTreeObj("treeDemo");    zTree.checkNode(treeNode, !treeNode.checked, null, true);    return false;}//节点选择事件function onCheck(e, treeId, treeNode) {    var zTree = $.fn.zTree.getZTreeObj("treeDemo"),    nodes = zTree.getCheckedNodes(true),    v = "";    var parentid = "";    var parentlevel = "";    for (var i = 0, l = nodes.length; i < l; i++) {        v += nodes[i].name + ",";        parentid += nodes[i].id + ",";        parentlevel += nodes[i].menu_level + ",";    }    if (v.length > 0) {        v = v.substring(0, v.length - 1);        parentid = parentid.substring(0, parentid.length - 1);        parentlevel = parentlevel.substring(0, parentlevel.length - 1);    }    else {        return;    }    hideMenu();}

上記はすべて静的データであるため、ツリーノードを動的にロードするためにバックグラウンドからデータを取得する必要がある場合は、バックグラウンドに移動して構築できますzNode のような構造体の配列。

4. まとめ

上記の 3 つのツリー コンポーネントにはそれぞれメリットがあり、ニーズに応じてさまざまなコンポーネントを選択できます。繰り返しになりますが、最適なものはありません。庭師がさらに有用な樹木コンポーネントを持っている場合は、それを推奨していただければ幸いです。前回の記事に問題があるとの指摘を受けましたので再投稿させていただきます。この記事が役立つと思われる場合は、

お勧め

してください。ブロガーは今後も努力を続けます。