bootstrap-table能做树形表格么

一、JQuery树形控件

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

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

Web前端实现像excel那样的按列拖选表格的方法：

1.通过flash，flex实现FLEX 功能强大的datagrid

2.通过jquery插件，js实现

JS实现可编辑的表格，双击可编辑，可以删除行和列，增加行和列，重置，导出表格，也可以上下移动元素

Flexigrid – Web 2.0 Javscript Grid for jQuery - 可变列宽，自动适应表头宽度，可通过 Ajax 连接 XML 数据源，类似 Ext Grid，但基于 jQuery 因此更轻量小巧。

Chromatable JQuery Plugin - 固定表头，可滚动内容区，内容区滚动的时候表头位置保持不变。

Ingrid, the jQuery Datagrid - 在 HTML 表格上加入列宽调整，分页，排序，行列式样等功能（演示）。

JQTreeTable - 在表格中加入树形结构

Scrollable HTML table - 将普通 HTML 表格变为可滚动状态。将表头部分放入 THEAD 区，内容部分放入 TBODY 区，脚注部分放入 TFOOT 区域，引用 webtoolkit.scrollabletable.js 文件，然后在每个表格后面创建 ScrollableTable() 对象即可（演示）。

KeyTable - 象 Excel 那样，在单元格之间巡游，可以现场编辑。

graphTable - 借助 flot 将 HTML 表格中的内容变成图形（演示）。

DataTables - 非常强大的 jQuery 表格插件，可变宽页码浏览，现场过滤。多列排序，自动探测数据类型，智能列宽，可从几乎任何数据源获取数据。

jquery树形表格treetable插件使用方法步骤：

第一步：

1.上官网下载。

2.插件引用，当下载的时候，会有很多个文件，但是根据api来看，如果只想做简单的效果，js除了引用juquery外，只需要引用jquery.treetable.js插件，如果想让它有默认的外观样式还需要引入它们的jquery.treetable.css和jquery.treetable.theme.default.css

第二步：建立table格式

<table id="example-advanced">

<tr data-tt-id="1">

<td>大家电</td>

</tr>

<tr data-tt-id="2" data-tt-parent-id="1">

<td>---电视</td>

</tr>

<tr data-tt-id="3" data-tt-parent-id="1">

<td>---洗衣机</td>

</tr>

<tr data-tt-id="4" data-tt-parent-id="1">

<td>---冰箱</td>

</tr>

</table>

第三步：引入JS

/* 初始化数据 */

$("#example-advanced").treetable({ expandable: true })/* 高亮显示 */$("#example-advanced tbody").on("mousedown", "tr", function() {

$(".selected").not(this).removeClass("selected")

$(this).toggleClass("selected")

})/* 点击展开&&关闭 */<a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced').treetable('expandAll')return false">展开</a>

<a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced').treetable('collapseAll')return false">关闭l</a>

---