下载后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使用的更多相关文章

  1. 原创jquery插件treeTable(转)

    由于工作需要,要直观的看到某个业务是由那些子业务引起的异常,所以我需要用树表的方式来展现各个层次的数据. 需求: 1.数据层次分明: 2.数据读取慢.需要动态加载孩子节点: 3.支持默认展开多少层. ...

  2. 【最新】2015年7月之15个最新jQuery插件

    Hello,一个激动人心的好消息,现在我为大家整理最近7月发布的jQuery插件. 如果你熟悉任何下面列出的插件,请分享你的反馈与我们的读者,或如果你知道哪一个我们没有收录,那么请与我们分享在下面的评 ...

  3. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

  4. JQuery插件定义

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...

  5. BootStrap_04之jQuery插件(导航、轮播)、以及Less

    1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...

  6. 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]

    1.表单验证插件Validation   2.表单插件Form   3.动态事件绑定插件livequery 可以为后来的元素绑定事件   类似于jQuery中的live()方法     4.jQuer ...

  7. 2016年6月份那些最实用的 jQuery 插件专辑

    jQuery 是一个快速.流行的 JavaScript 库,jQuery 用于文档处理.事件处理.动画和 Ajax 交互非常简单,学习曲线也很平坦.2016年6月的 jQuery 插件专辑里,我们选择 ...

  8. 教你开发jQuery插件(转)

    教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...

  9. Lazy Load, 延迟加载图片的 jQuery 插件.

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

随机推荐

  1. [ASP.NET MVC] ASP.NET Identity登入技术剖析

    [ASP.NET MVC] ASP.NET Identity登入技术剖析 前言 ASP.NET Identity是微软所贡献的开源项目,用来提供ASP.NET的验证.授权等等机制.本篇文章介绍ASP. ...

  2. 足球宝贝来了,任你旋转(CSS3)

    点击这里体验效果:http://keleyi.com/a/bjad/tfxpf3p5.htm 请使用支持CSS3的浏览器查看.请把光标放到图片上,然后再移到图片外,注意效果. 原图 大图 以下是源代码 ...

  3. 原生JS:JSON对象详解

    JSON对象 支持到IE8,旧版的IE需要Polyfill 本文参考MDN做的详细整理,方便大家参考[MDN](https://developer.mozilla.org/zh-CN/docs/Web ...

  4. ExecuteScalar()

    ExecuteScalar()方法的作用是: 执行查询,并返回查询所返回的结果集中第一行的第一列.所有其他的列和行将被忽略. 它的返回值时object,若是想判断某条数据在数据库里存不存在便可使用该方 ...

  5. js => ES6一个新的函数写法

    今天在网上参观到一个写法,返回字符串个个字母的个数 var arr='aaabbccaa'; var info = arr.split('').reduce((p, k) => (p[k]++ ...

  6. Objective-C 快速入门--基础(四)

    1.什么是Block? ① 块语法,本质上是匿名函数(没有名称的函数): ② Block是OC中的一种数据类型,在iOS开发中被广泛使用: ③ ^是Block的特有标记: ④ Block的实现代码包含 ...

  7. Android数据存储方式--SharedPreferences

    Android数据存储方式有如下四种:SharedPreferences.存储到文件.SQLite数据库.内容提供者(Content provider).存储到网络服务器. 本文主要介绍一下Share ...

  8. iOS---A valid provisioning profile for this executable was not found

    把Target中的Code Signing Identity也设置成iPhone Develop就ok了,这样一切都说的通了,唯一不合理的就是在Project切换Code Signing Identi ...

  9. 【代码笔记】iOS-网络嗅探

    一,效果图. 二,工程图. 三,代码. AppDelegate.h #import <UIKit/UIKit.h> #import "Reachability.h" @ ...

  10. sourceTree忽略文件

    *~.DS_Store*.xcworkspacexcuserdata Podfile.lockPods