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 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
随机推荐
- jqGrid使用setColProp方法动态改变列属性
在使用jqGrid插件时,有时我们需要动态改变列的属性,可使用setColProp方法,用法如下 jQuery(”#grid_id”).setColProp('colname',{editoption ...
- 浅谈RecyclerView(完美替代ListView,GridView)
Android RecyclerView 是Android5.0推出来的,导入support-v7包即可使用. 个人体验来说,RecyclerView绝对是一款功能强大的控件. 首先总结下Recycl ...
- IOS 序列化与反序列化NSKeyedUnarchiver
开篇 1到底这个序列化有何作用? 面向对象的程序在运行的时候会创建一个复杂的对象图,经常要以二进制的方法序列化这个对象图,这个过程叫做Archiving. 二进制流可以通过网络或写入文件中. 当你写的 ...
- 将UIview描画成虚线等.
- (UIView *)lineView{ if (!_lineView) { _lineView = [UIView new]; // _lineView.backgroundColor = UIC ...
- TOP命令各个参数代表意义详解
Top命令是Linux下常用的系统性能分析工具,能实时查看系统中各个进程资源占用情况. top - 16:24:25 up 284 days, 4:59, 1 user, load average: ...
- Java暗箱操作之自动装箱与拆箱
我以前在写Android项目的时候,估计写得最多最熟练的几句话就是: List<Integer> list = new ArrayList<Integer>(); list.a ...
- ORACLE动态采样分析
td {border:solid #9ec9ec; border-width:0px 1px 1px 0px; padding:4px 0px;} table {border:1px solid #9 ...
- GConf error:Failed to contact configuration server
Linux系统运行一直正常,但是图形界面使用root账号登录时遇到下面错误,第一次遇到这么怪异的状况 具体错误信息如下所示: GConf error:Failed to contact configu ...
- IE8 ajax缓存问题
娘希匹,又遇到缓存问题了. 下面的代码,在其他浏览器都是正常的,但是在IE8中出现诡异问题. $.ajax({ url:dataUrl, data:encodeURI(currentjsonform) ...
- Linux下使用 Memory Analyzer
一. 安装Memory Analyzer Tool 打开eclipse >> Help >> Install New Software >> 点击Work With ...