zoukankan      html  css  js  c++  java
  • 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>
                &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>
    复制代码

      之前同事写的嵌套几层循环,每层循环内判断,改造后在页面里定义输出方法递归调用,显示效果跟之前同事写的一样,看看效果

  • 相关阅读:
    你真的理解正则修饰符吗?
    一个简单易用的容器管理平台-Humpback
    【译】参考手册-React组件
    【译】快速起步-组件与属性
    css可应用的渐进增强新特性
    javascript编程杂记
    ES6模块的import和export用法总结
    对于未来chrome80 samesite问题的兼容解决方案
    mogodb数据库简单的权限分配
    egg.js npm start 启动报错
  • 原文地址:https://www.cnblogs.com/soundcode/p/6195776.html
Copyright © 2011-2022 走看看