下載后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>
之前同事寫的嵌套幾層循環,每層循環內判斷,改造后在頁面里定義輸出方法遞歸調用,顯示效果跟之前同事寫的一樣,看看效果


