jquery插件treetable使用
Posted 左正
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery插件treetable使用相关的知识,希望对你有一定的参考价值。
下载后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>
之前同事写的嵌套几层循环,每层循环内判断,改造后在页面里定义输出方法递归调用,显示效果跟之前同事写的一样,看看效果
以上是关于jquery插件treetable使用的主要内容,如果未能解决你的问题,请参考以下文章