首页 > 代码库 > jquery插件treetable使用

jquery插件treetable使用

2024-08-28 00:23:16   220人阅读

下载后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="http://www.mamicode.com/#" 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="http://www.mamicode.com/#" onclick="del(‘@org.ID‘,‘@org.Name‘)"><span class="glyphicon glyphicon-trash"></span></a>                <i>&nbsp;</i>            }            @if (org.AreaType != 1)            {                <a href="http://www.mamicode.com/#" 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使用


联系
我们