はじめに: 多くの場合、プロジェクトではツリーを使用する必要があります。階層関係を表示するためだけのツリーもあれば、階層関係を表示および編集するためのツリーもあれば、項目を選択して選択した項目を別の場所で呼び出すためのツリーもあります。いずれにしても、ツリー コントロールは多くのプロジェクトにおいて不可欠なコンポーネントの 1 つです。今日、ブロガーは、誰もが最適なコントロールを見つけられるようにしたいと考えて、自身の経験とインターネット上で見つけたいくつかの優れたツリー コントロールに基づいてここで共有する予定です。同じ文も同じです: 最適な制御はなく、最も適切な制御があるだけです。
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>
2. ファイル ツリー編集プラグイン Tree
このコンポーネントは、最初のデモンストレーションの後、その効果が大きいと口を揃えて感じました。ツリー状に表示されるので、ノードの追加、削除、変更が簡単に行えます。ノードのスケーリング効果も向上しています。さて、見てみましょう。
1. Tree との最初のミーティング
デフォルトの展開は 1 レベルです
左側の「+」記号をクリックして右側のノードをクリックすると、子ノードが展開されます
マルチレベル展開
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" />
<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>
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();};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>
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();}上記の 3 つのツリー コンポーネントにはそれぞれメリットがあり、ニーズに応じてさまざまなコンポーネントを選択できます。繰り返しになりますが、最適なものはありません。庭師がさらに有用な樹木コンポーネントを持っている場合は、それを推奨していただければ幸いです。前回の記事に問題があるとの指摘を受けましたので再投稿させていただきます。この記事が役立つと思われる場合は、
お勧め
してください。ブロガーは今後も努力を続けます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
