下载后treetable插件后只需要保留jquery.treetable.css样式文件，jquery.treetable.theme.default.css皮肤文件和jquery.treetable.js库，在页面上引用后初始化
$("#treeTable").treetable({ expandable: true });
expandable为true ，初始化展开显示
先上局部视图改造后的代码，
@model List<Org>
@helper RenderTable(Org org, List<Org> source)
{
<tr data-tt-id="@org.ID" data-tt-parent-id="@org.ParentID">
<td>
<span class="folder">@org.Name</span>@((org.AreaType == 1) ? "（镜头组）" : "")
</td>
<td class="text-center">
<a href="#" onclick="edit(false,'@org.ID')"><span class="glyphicon glyphicon-edit"></span></a>
@if (org.ParentID != "0" && source.Count(m => m.ParentID == org.ID) <= 0)
{
<a href="#" onclick="del('@org.ID','@org.Name')"><span class="glyphicon glyphicon-trash"></span></a>
<i> </i>
}
@if (org.AreaType != 1)
{
<a href="#" onclick="edit(true,'@org.ID')"><span class="glyphicon glyphicon-plus"></span></a>
}
</td>
</tr>
if (source.Count(m => m.ParentID == org.ID) > 0)
{
foreach (var item in source.Where(m => m.ParentID == org.ID).ToList())
{
@RenderTable(item, source);
}
}
}
<table class="table table-bordered table-striped" id="treeTable">
<thead>
<tr>
<th width="80%">编号</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
@if (null != Model && Model.Any())
{
foreach (var item in Model.Where(m => m.ParentID == "0").ToList())
{
@RenderTable(item, Model)
}
}
</tbody>
</table>
之前同事写的嵌套几层循环，每层循环内判断，改造后在页面里定义输出方法递归调用，显示效果跟之前同事写的一样，看看效果
本文转自左正博客园博客，原文链接：http://www.cnblogs.com/soundcode/p/6195776.html，如需转载请自行联系原作者
