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