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使用的更多相关文章
- 原创jquery插件treeTable(转)
由于工作需要,要直观的看到某个业务是由那些子业务引起的异常,所以我需要用树表的方式来展现各个层次的数据. 需求: 1.数据层次分明: 2.数据读取慢.需要动态加载孩子节点: 3.支持默认展开多少层. ...
- 【最新】2015年7月之15个最新jQuery插件
Hello,一个激动人心的好消息,现在我为大家整理最近7月发布的jQuery插件. 如果你熟悉任何下面列出的插件,请分享你的反馈与我们的读者,或如果你知道哪一个我们没有收录,那么请与我们分享在下面的评 ...
- 自己写jquery插件之模版插件高级篇(一)
需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...
- JQuery插件定义
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
- BootStrap_04之jQuery插件(导航、轮播)、以及Less
1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...
- 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]
1.表单验证插件Validation 2.表单插件Form 3.动态事件绑定插件livequery 可以为后来的元素绑定事件 类似于jQuery中的live()方法 4.jQuer ...
- 2016年6月份那些最实用的 jQuery 插件专辑
jQuery 是一个快速.流行的 JavaScript 库,jQuery 用于文档处理.事件处理.动画和 Ajax 交互非常简单,学习曲线也很平坦.2016年6月的 jQuery 插件专辑里,我们选择 ...
- 教你开发jQuery插件(转)
教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...
- Lazy Load, 延迟加载图片的 jQuery 插件.
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
随机推荐
- OData V4 系列 Ajax请求 CRUD
OData 学习目录 上一篇已经完成了服务创建,本篇主要介绍如何通过Ajax请求Odata服务,OData操作主要有 Get.Post.Patch.Put.Delete等操作. Post 操作 p ...
- jQuery LayDate 日期控件
她基于原生JavaScript精心雕琢,兼容了包括IE6在内的所有主流浏览器.她具备优雅的内部代码,良好的性能体验,和完善的皮肤体系,并且完全开源,你可以任意获取开发版源代码,一扫某些传统日期控件的封 ...
- JQUERY 实现加入收藏夹功能
关于"加入收藏"的代码,很多人都不会重视,一般情况是随便在网上搜一个代码放在页面里就草草了事了.可是都没有做到主流浏览器的兼容.下面分享一段使用 jQuery 实现加入收藏夹的功能 ...
- 探讨webapp的SEO难题(上)
前言 网络蜘蛛无法解析javascript,至少百度是不能的,神马搜索差的更远,而我们的webapp的渲染展示完全由javascript驱动 所以蜘蛛访问webapp页面会得到一个白页面,比如,我们期 ...
- 第一个web框架tornado
简介 tornado,是我学到的第一个web框架是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本.这个 Web 框架看起来有些像web.py 或者 Google ...
- JavaScript - 基于CSS3动画的实现
在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...
- Android Studio导入修改
- 在 CentOS7 上部署 zookeeper 服务
在 CentOS7 上部署 zookeeper 服务 1 用 SecureCRT 或 XShell 等 Linux 客户端工具连接至 CentOS7 服务器: 2 进入到 /usr/local/too ...
- android handler ,message消息发送方式
1.Message msg = Message.obtain(mainHandler) msg.obj=obj;//添加你需要附加上去的内容 msg.what = what;//what消息处理的类 ...
- Play Framework 完整实现一个APP(五)
程序以及基本可用了,需要继续完善页面 1.创建页面模板 创建文件 app/views/tags/display.html *{ Display a post in one of these modes ...