一、jquery树形控件
jquery树形控件是一款基于jquery+bootstrap、完全通过js和样式手写出来的非常轻量级的控件，网上很多地方都能看到它的影子。它功能简单、用户体验不错。对于一些简单的层级关系展示比较实用，但对于节点的增删改实现起来就不容易了，如果非要做，可能需要自己去封装。
1、一睹初容
全部收起
展开一级
全部展开
2、代码示例
此控件实现起来也非常简单，只需要引用jquery和bootstrap组件即可。

顶级节点1 goes somewhere 一级节点1 二级节点1_1 一级节点2 二级节点2_1 二级节点2_2 三级节点2_1 四级节点2_1 四级节点2_2 三级节点2_2 三级节点2_3 二级节点2_3 顶级节点2 一级节点2_1

这些代码都是直接从网上down下来的，节点上面的图标可以通过样式修改，图标样式也是基于bootstrap的。如果需要动态添加节点，可以自己封装组件去拼html，实现起来应该也比较简单。由以上可知此组件的轻量级，如果你需要对节点作增删改或者选择等操作，不要急，下面的控件可能比较适用。
二、文件树编辑插件treed
这个组件是从网上找到的，最初演示，组内成员一致觉得效果很赞。因为它通过树形展示，方便的提供了节点的增删改。节点的伸缩效果也比较好。好了来看看。
1、初见treed
默认展开一级
点击左边的“+”号和右边的节点都会去展开子节点
多级展开
在左边可以编辑节点名称
按enter键换行新增兄弟节点，同样删除换行就可以删除节点。
按enter键后再按下tab键可以新增子节点
很强大有木有。审核元素可知它使用的是html5的svg标签来实现的，所以对浏览器有一定的要求。
三、通用树形控件——ztree
ztree是一个传统的树形组件，其强大的功能决定他在树形控件界的地位。不管是树形展示，还是编辑，又或者是节点单选和多选，它都提供了强大的功能api。但是，由于它界面效果不太好看，所以很多公司使用它的时候都会有一定的犹豫。所幸，至从出了扁平化风格后，ztree也做了一定的美化，比如它的metro风格的组件和bootstrap风格就非常相像。今天就来结合metro风格的ztree来介绍下这个组件的一些用法。
1、组件使用
此组件可直接通过nuget去添加。
2、组件效果
节点全部收起
节点展开
节点选中，当然如果需要可以变成单选。
可以增删改节点
点击文本框出现树
3、代码示例
3.1 直接在界面显示文本框
需要引用的js和css文件

页面html

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 = ; 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默认是隐藏的。

在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 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();}
由于以上都是静态数据，如果需要从后台取数据动态加载树节点，可以去后台构造znodes这种结构的数组即可。
以上三种树形组件，各有千秋，可以根据需求选用不同的组件，希望本文所述对大家学习树形控件有所帮助。