treegrid.bootstrap使用说明

这个插件是用来做有层次的表格的,大概如图:

官网  http://maxazan.github.io/jquery-treegrid/

使用这个控件之前需要引入以下css及js(因为用到了 bootstrap.js 所以加上了 bootstrap的样式和脚本)

bootstrap.min.css

jquery.treegrid.css

jquery.min.js

bootstrap.min.js

jquery.treegrid.js

jquery.treegrid.bootstrap3.js

然后将需要用到的<table>标签中加入对应样式:

<table class="tree table table-hover table-bordered table-condensed">

<tr class="treegrid-1">

<td>Root node</td><td>Additional info</td>

</tr>

<tr class="treegrid-2 treegrid-parent-1">

<td>Node 1-1</td><td>Additional info</td>

</tr>

<tr class="treegrid-3">

<td>Node 1-2</td><td>Additional info</td>

</tr>

<tr class="treegrid-4 treegrid-parent-3">

<td>Node 1-2-1</td><td>Additional info</td>

</tr>

</table>

然后引用js

<script type="text/javascript">

$(document).ready(function () {

$('.tree').treegrid();

});

</script>

结果如下:

可以从上面的一段html中看出,使用这个控件的关键点有:

1,每一行<tr>都有唯一的id号   treegrid-***

2,子节点的<tr>都有parentID号  treegrid-parent-**

3,子节点必须紧跟在父节点后面,否则表格会排序错误(已测试过了)

总结一点:使用这个treegrid 就是把 <tr class=”treegrid-** treegrid-parent-**”>拼写正确。

例子代码中展示了动态生成treegrid的程序,

大概的思路是:

1, 找到所有父节点

2, 遍历父节点,生成<tr> ,如果该父节点有子节点,进行步骤3

3, 遍历子节点,生成<tr> ,返回步骤2

总的来说是一个递归的过程

treegrid.bootstrap使用说明的更多相关文章

  1. BootStrap基本控件

    简介 BootStrap是一个用于快速开发web应用程序和网站的前端框架. BootStrap是基于HTML, CSS, JavaScript. BootStrap是由Twitter的Mark Ott ...

  2. Bootstrap treegrid 实现树形表格结构

    前言 :最近的项目中需要实现树形表格功能,由于前端框架用的是bootstrap,但是bootstrapTable没有这个功能所以就找了一个前端的treegrid第三方组件进行了封装.现在把这个封装的组 ...

  3. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

  4. 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用

    在上篇<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局.菜单等内容, ...

  5. angularjs封装bootstrap官网的时间插件datetimepicker

    背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...

  6. Bootstrap 4 中 Alerts 实现

    Alert 的使用说明 http://v4-alpha.getbootstrap.com/components/alerts/ JavaScript behavior Triggers Enable ...

  7. [ASP.NET MVC] 使用Bootstrap套件

    [ASP.NET MVC] 使用Bootstrap套件 前言 在开发Web项目的时候,除了一些天赋异禀的开发人员之外,大多数的开发人员应该都跟我一样,对于如何建构出「美观」的用户接口而感到困扰.这时除 ...

  8. ASP.NET MVC+Bootstrap个人博客之后台dataTable数据列表(五)

    jQuery  dataTables 插件是一个优秀的表格插件,是后台工程师的福音!它提供了针对数据表格的排序.浏览器分页.服务器分页.查询.格式化等功能.dataTables 官网也提供了大量的演示 ...

  9. Bootstrap基本使用[转]

    Bootstrap是Twitter推出的一个由动态CSS语言Less写成的开源CSS/HTML框架(同时提供Sass 移植版代码).Bootstrap提供了全面的基本及组件样式并自带了13个jQuer ...

随机推荐

  1. css3新增的background属性

    1.background-size 可取值:auto(背景图片正常显示) size size (150px 40%) cover (背景图片覆盖整个背景) contain(背景图片缩小填满整个背景) ...

  2. Monkey and Banana(基础DP)

    Monkey and Banana Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  3. fork,exec,source

    http://alsww.blog.51cto.com/2001924/1113112 http://stackoverflow.com/questions/1127502/start-stop-da ...

  4. 所有事件event集锦

    'mousedown touchstart', 'mousemove touchmove', 'mouseup mouseleave touchend touchleave touchcancel', ...

  5. 基于keepalived 实现VIP转移,lvs,nginx的高可用

    转自:http://www.tuicool.com/articles/eu26Vz 一.Keepalived 高可用集群的解决方案 二.VRRP的有限状态机 三.利用keepalived 实现主从VI ...

  6. python函数的参数传递问题---传值还是传引用?

    摘要:在python中,strings, tuples, 和numbers是不可更改的对象,而list,dict等则是可以修改的对象.不可更改对象的传递属于传值,可更改对象属于传引用.想要在函数中传递 ...

  7. HDU 4044 GeoDefense

    树形DP,和背包差不多.dp[now][x]表示now这个节点的子树上,花费为x的时候,获得的最大防御能力(保证敌方HP<=0) #include<cstdio> #include& ...

  8. CSS3样式linear-gradient的使用(切角效果)

    linear-gradient linear-gradient是CSS3中新增的样式,主要用于颜色的渐变效果.MDN地址 linear-gradient在不同内核下使用方式不同,详细内容可参考w3cp ...

  9. 在Windows环境下设置terminal下调试adb

    当我们想要查看某些程序运行的结果的时候.可能需要打开adb,输入相应的命令,在Windows环境下,需要配置环境变量. 当我们直接在Windows环境下输入adb shell,会提示adb是不内部命令 ...

  10. GCJ Round 1C 2009 Problem C. Bribe the Prisoners

    区间DP.dp[i][j]表示第i到第j个全部释放最小费用. #include<cstdio> #include<cstring> #include<cmath> ...