树型表格怎么做?

1、在菜单栏上面点右键，把“绘图”打钩（一般默认就有）；这样页面底下就会出现“绘图”菜单栏。

2、做简单的word或excel的树状图，我们可以“矩形”和“直线”绘制，但是有几个地方要设置：

A、在页面上绘制一个“矩形”，右键点击它---“设置自选图形格式”---“版式”---选择“浮于文字上方”，这样矩形可以随意在页面上移动，方便编辑；

B、在“矩形”上点击右键“编辑文字”，可以添加需要的内容；

C、具体的文字排版、矩形颜色的填充、“直线”与“矩形”的大小和对齐需要细心排版（可以放大页面的比例来进行接合，如调成300%）；

D、在完成编辑以后，可以按住SHIFT键不放，把所有图形全部选择，在上面点击右键择“组合”，这样可以固定编辑好的树状图，可以随意完成整体拖放。

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

1、一睹初容

全部收起

展开一级

全部展开

2、代码示例

此控件实现起来也非常简单，只需要引用jQuery和bootstrap组件即可。

<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>

这些代码都是直接从网上down下来的，节点上面的图标可以通过样式修改，图标样式也是基于bootstrap的。如果需要动态添加节点，可以自己封装组件去拼html，实现起来应该也比较简单。由以上可知此组件的轻量级，如果你需要对节点作增删改或者选择等 *** 作，不要急，下面的控件可能比较适用。

二、文件树编辑插件Treed

这个组件是从网上找到的，最初演示，组内成员一致觉得效果很赞。因为它通过树形展示，方便的提供了节点的增删改。节点的伸缩效果也比较好。好了来看看。