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

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

时间: 2024-10-11 05:09:01

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

BootStrap基本控件

简介 BootStrap是一个用于快速开发web应用程序和网站的前端框架. BootStrap是基于HTML, CSS, JavaScript. BootStrap是由Twitter的Mark Otto和Jacob Thomton开发的. BootStrap是2011年八月在GitHub上发面的开源产品. 为什么使用BootStrap 移动设备优先的响应式网格, 从BootStrap3.0开始, 框架将包含了移动终端设备的优先的样式. 浏览器支持IE, Firefox, opera, chrom

bootstrap treegrid 实现树形表格结构

前言 :最近的项目中需要实现树形表格功能,由于前端框架用的是bootstrap,但是bootstrapTable没有这个功能所以就找了一个前端的treegrid第三方组件进行了封装.现在把这个封装的组件贴出来 大家共同讨论进步. 1 效果图 2 组件下载地址 链接: https://pan.baidu.com/s/1R8jIGXimeJwUcL7WyqZjDA 密码: ud96 3 组件的使用 3.1 在页面中引入如下的文件 <link href="~/Content/bootstrap/

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

表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个性化的需求,使得我们用这些插件的默认机制并不能完成这些功能,所以要根据自己的需要去改造它们(毕竟自己还不到那个写一个完美的校验框架的层次).我用过formValidation这个校验框架,虽然它跟bootstrap配合地很好,但是校验风格太死板,不太满足个性化的场景:后来我找到了jquery.val

JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐

前言:之前分享过很多bootstrap常用组件,包括表格.表单验证.文件上传.复选下拉框.弹出框等.这段时间,博主又收藏了一些好用的组件(有些在项目中已经用起来了),经过两天的时间,已经整理出了一部分,本着“好东西要与人分享”的原则,今天还是来点福利,将博主收藏的东西分享出来,供需要的园友参考.组件大部分都是些开源组件,也有部分是博主自己在网上找到然后改写出来的效果,可能不尽如人意,有兴趣的且看看吧. 一.时间组件 bootstrap风格的时间组件非常多,你可以在github上面随便搜索“dat

Bootstrap基本使用[转]

Bootstrap是Twitter推出的一个由动态CSS语言Less写成的开源CSS/HTML框架(同时提供Sass 移植版代码).Bootstrap提供了全面的基本及组件样式并自带了13个jQuery插件(模态对话框.标签页.滚动条.弹出框等),可满足常用开发 需要,而且还根据需要定制.另外,Bootstrap提供了优雅的HTML和CSS规范,使用者也可以参考学习.本文作者(jawidx)仅在结构层面对 Bootstrap进行介绍. 全局样式 1 Bootstrap 中用到一些 HTML元素和

[ASP.NET MVC] 使用Bootstrap套件

[ASP.NET MVC] 使用Bootstrap套件 前言 在开发Web项目的时候,除了一些天赋异禀的开发人员之外,大多数的开发人员应该都跟我一样,对于如何建构出「美观」的用户接口而感到困扰.这时除了,加入美术人员这个选项之外,开发人员也可以自立自强,为Web项目内加入Bootstrap套件.透过使用Bootstrap套件中各种设计精美的样式.组件,来让Web项目的用户接口更加的美观大气,增加客户对于项目产出的好感度.本篇文章介绍如何在Web项目里使用Bootstrap套件,为自己留个纪录也希

bootstrap学习以及其插件

Bootstrap中文网地址,里面有bootstrap组件的下载与使用说明,现在使用bootstrap3: http://www.bootcss.com/ W3CSchool.CC里面有学习bootstrap的内容,可以在线测试,觉得不错: http://www.w3cschool.cc/bootstrap/bootstrap-tutorial.html 由于bootstrap没有日历控件,我打算用这个日历控件,里面有使用说明: http://www.html580.com/?2zi_fRif

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

背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经很成熟的jquery UI 库和大量jquery 插件,几乎是一个取之不尽用之不竭的宝库.然而,它是否能与angularjs结合呢? 很多angularjs原教旨主义者对此持否定态度.他们认为,既然已经使用了angularjs做web应用框架,那就必须避免其他类库的干扰,做纯净的MvvM模式应用.任

python Flask EasyUI使用说明

0.前言 本文说明如何在flask框架下使用前端组件EasyUI.在flask框架中链接css文件,js脚本和图片等静态文件的方式和其他web服务器存在差别.在flask框架中这些静态文件一般存放与static文件夹中,并通过url_for函数指定static中相对位置和文件名. [代码仓库] 代码仓库位于bitbucket--flask-easyui,请使用支持HTML5的浏览器打开链接. [相关博文] [1]python 扩展库安装 使用第三方镜像源 [2]python Flask 学前班