码迷,mamicode.com
首页 > Web开发 > 详细

jquery插件treetable使用

时间:2016-12-19 00:01:35      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:tree   bsp   初始化   引用   tool   parent   输出   ima   css   

下载后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>
            &nbsp;
            @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>&nbsp;</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使用

标签:tree   bsp   初始化   引用   tool   parent   输出   ima   css   

原文地址:http://www.cnblogs.com/soundcode/p/6195776.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!