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>标签中加入对应样式：

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

</tr>

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

</tr>

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

</tr>

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

</tr>

</table>

然后引用js

$(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

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

转载于:https://www.cnblogs.com/fuqiang88/p/4768879.html

treegrid.bootstrap使用说明相关推荐

基于javaweb的宠物店管理系统(java+jsp+javascript+bootstrap+mysql)
基于javaweb的宠物店管理系统(java+jsp+javascript+bootstrap+mysql) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse/i ...
基于javaweb的图书馆借阅管理系统(java+springboot+bootstrap+html+mysql)
基于javaweb的图书馆借阅管理系统(java+springboot+bootstrap+html+mysql) 运行环境 Java≥8.MySQL≥5.7 开发工具 eclipse/idea/my ...
基于javaweb的校园报修管理系统(java+springboot+bootstrap+jsp+mysql)
基于javaweb的校园报修管理系统(java+springboot+bootstrap+jsp+mysql) 运行环境 Java≥8.MySQL≥5.7 开发工具 eclipse/idea/myec ...
基于javaweb的智能小区物业管理系统(java+jsp+bootstrap+javascript+servlet+mysql)
基于javaweb的智能小区物业管理系统(java+jsp+bootstrap+javascript+servlet+mysql) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工 ...
Java项目:智能小区物业管理系统(java+JSP+bootstrap+JavaScript+servlet+Mysql)
源码获取:俺的博客首页 "资源" 里下载! 项目介绍本项目为后台管理系统,分为管理员与业主两种角色: 管理员主要功能包括: 首页.公告查询.修改密码.报修管理.业主信息.房产信息 ...
基于javaweb+mysql的大学生实习管理系统(java+springboot+thymeleaf+html+jquery+bootstrap)
基于javaweb+mysql的大学生实习管理系统(java+springboot+thymeleaf+html+jquery+bootstrap) 运行环境 Java≥8.MySQL≥5.7 开发工 ...
基于javaweb+SpringBoot的大学生实习管理系统(java+SpringBoot+Thymeleaf+html+JQuery+bootstrap)
项目介绍本系统的用户可以分为三种:管理员.教师.学生.三种角色登录后会有不同菜单界面: 管理员主要功能: 信息管理学生信息管理.教师信息管理.生产实习信息管理.顶岗实习信息管理: 生产实习生产实 ...
基于javaweb的医院住院管理系统(java+ssm+jsp+bootstrap+mysql)
基于javaweb的医院住院管理系统(java+ssm+jsp+bootstrap+mysql) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse/idea/my ...
基于javaweb的智能餐厅管理系统(java+ssm+jsp+bootstrap+mysql)
基于javaweb的智能餐厅管理系统(java+ssm+jsp+bootstrap+mysql) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse/idea/my ...

treegrid.bootstrap使用说明

treegrid.bootstrap使用说明相关推荐

最新文章

热门文章