treegrid.bootstrap使用说明

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

 

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

 

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/431425.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

matlab 条形图横坐标,Matlab条形图bar横坐标间距设置

1. 默认横坐标数据 X[x1, x2, x3, x4, x5, x6] %一行六列bar(X); %绘制基础条形图2. 修改横坐标标签#考虑横坐标标签文本较长且字体较大的情况bar(X);set(gca, xticklabels,{Apple, Orange, Banana, Pear, Pitaya, Lemon}, Fontname, Times New Roman, Fontsize, 16); %修…

成都python数据分析师职业技能_合格大数据分析师应该具备的技能

课程七、建模分析师之软技能 - 数据库技术本部分课程主要介绍MySQL数据库的安装使用及常用数据操作1、关系型数据库介绍2、MySQL的基本操作:1)数据库的操作2)数据表的操作3)备份与恢复3、常用的SQL语句:1)查询语句(SELECT)2)插入语句(INSERT)3)更新语句(UPDATE)4)删除语句(DELE…

项目属性--生成事件--后期生成事件命令行

以开源记牌器https://github.com/Epix37/Hearthstone-Deck-Tracker 为例&#xff0c;Hearthstone Deck Tracker项目中的后期生成事件命令行&#xff1a; if "$(ConfigurationName)" "Release" ( rmdir /S /Q "..\Hearthstone Deck Tracker" mkd…

大连理工优化方法matlab,大连理工大学2016年秋季优化方法大作业.pdf

优化方法期末上机大作业姓 名&#xff1a;李岚松学 部&#xff1a;电信学部电气工程学 号2016 年 11 月 9 日1最速下降法//最速下降法主函数//function llsdi1titidu(x)di1titidu(x)x0x; eps1e-4; k0; g0g(x0); s04; k0; g0g(x0); s0-g0;while (k>0)if norm(g0)break;elsela…

查看租户情况

source /root/openrc 查看keystone租户 keystone tenant-list 已知租户ID&#xff0c;获取租户名称 keystone tenant-get 5d95a18b92834ef2ada3abcf8eff1c83 查看某租户的配额及使用情况 # nova absolute-limits –-tenant ac9e6a9f-58c(租户ID)&#xff08;输出的内容不准确&a…

stm32 485和232可以用同一个串口吗_STM32的复用时钟何时开启?

STM32的AFIO时钟真的是在开启引脚复用功能的时候开启吗&#xff1f;其实并不是~什么是复用&#xff1f;我们知道&#xff0c;STM32有很多外设&#xff0c;这些外设的外部引脚都是与GPIO共用的。我们可以通过软件来配置引脚作为GPIO引脚还是作为外设引脚。当引脚配置为外设引脚时…

matlab 0-100随机数,添加到100的随机数:matlab

我经常看到这样的错误&#xff1a;要用给定的和来生成随机数&#xff0c;我们只需要使用一个一致的随机集&#xff0c;并且只需对它们进行缩放。但是&#xff0c;如果你这样做的话&#xff0c;结果真的都是随机的吗&#xff1f;在两个维度上尝试这个简单的测试。生成一个巨大的…

url中#号的作用

url中#号的作用就是本页面位置跳转 比如这个url地址&#xff1a;http://www.aaaaa.com/index.html?ad34&mc#red red就是index.html页面的依哥位置 浏览器读取这个URL后&#xff0c;会自动将red位置滚动至可视区域 位置定义方式 <a name"red">cdsc</a&…

python访问mysql_python连接mysql

首先需要导入驱动模块打开cmd导入模块 pip install mysqldb(pymysql)python2.x版本--------->mysqldbpython3.x版本---------->pymysqlpython调用MySQL数据库总共五步1、导入模块(驱动) pymysql mysqldb2、获取连接 connect3、获取游标cursor4、执行sql execute 并且返回…

php左侧菜单栏递归代码,js实现左侧菜单栏递归循环遍历

首先html布局菜单jsonconst menuList [{title: 首页,key: /home},{title: UI,key: /ui,children: [{title: 按钮,key: /ui/buttons,},{title: 弹框,key: /ui/modals,},{title: Loading,key: /ui/loadings,},{title: 通知提醒,key: /ui/notification,},{title: 全局Message,key…

重定向IO

引用自&#xff1a;http://www.cnblogs.com/liunanjava/p/4307793.html 1.三个静态变量 java.lang.System提供了三个静态变量 System.in&#xff08;默认键盘&#xff09;System.out(默认显示器)System.errSystem提供了三个重定向方法2.重写向方法 System提供了三个重定向方法 …

python三维数据本地保存_如何将3D Python/NumPy数组保存为文本文件?

如果保存文件需要是“csv”样式的文本&#xff0c;则可以使用多个savetxt和loadtxt。关键是要知道这两个都可以以打开的文件作为输入。写作示例&#xff1a;In [31]: Anp.arange(3*2*4).reshape(3,2,4)In [32]: A # normal display as 3 blocks of 2d arrayOut[32]:array([[[ 0…

php 简析对象,PHP白盒审计工具RIPS源码简析

RIPS是一款对PHP源码进行风险扫描的工具&#xff0c;其对代码扫描的方式是常规的正则匹配&#xff0c;确定sink点&#xff1b;还是如flowdroid构建全局数据流图&#xff0c;并分析存储全局数据可达路径&#xff1b;下面就从其源码上略探一二。1、扫描流程分析其源码前&#xff…

投资股权众筹项目,至少需要关注6个方面

1.股权结构去工商局查看这个公司的股权结构&#xff0c;哪些人是股东&#xff0c;历史出资情况。工商局网站上有很多信息可以查看&#xff0c;我发现北京工商局网站上可以查看的信息比较全面&#xff0c;而上海的就很稀烂。 几个查询网站&#xff1a; 北京企业信用信息网 ht…

python支持gui编程_Python GUI编程完整示例

本文实例讲述了python gui编程。分享给大家供大家参考&#xff0c;具体如下&#xff1a;import osfrom time import sleepfrom tkinter import *from tkinter.messagebox import showinfoclass dirlist(object):def __init__(self, initdirnone):self.top tk()self.label lab…

左右伸缩_冬季装修为啥要留伸缩缝?等到天热地板开裂就晚了!合肥人注意下...

后台有粉丝问&#xff1a;冬天真的不适合做装修吗&#xff1f;假的&#xff0c;这句话不要再传了。每个季节都会有利有弊&#xff0c;只不过冬季施工过程中干燥的比较快&#xff0c;装修的时候对施工要求的更严格。就拿伸缩缝来说吧&#xff0c;冬天装修时不注意&#xff0c;等…

转折点(心得)

也许是刚开学不适应&#xff1f;反正就是心不静&#xff0c;给自己一天时间调整&#xff0c;马上好过来&#xff0c;加油!!!以后每天至少一道题&#xff0c;但是要是学到东西的题&#xff0c;加油&#xff01;合理安排&#xff0c;有条不紊&#xff01;转载于:https://www.cnbl…

php进入文件目录,php文件目录操作

新建文件1、先确定要写入文件的内容$content 你好;2、打开这个文件(系统会自动建立这个空文件)//假设新建的文件叫file.txt&#xff0c;而且在上级目录下。w表示‘写文件’&#xff0c;$fp下面要用到&#xff0c;表示指向某个打开的文件。$fp fopen(../file.txt, w);3、将内容…

python设计自定义栈类_Python如何自定义模块?Python基础教程,第十讲,自定义模块...

学完此次课程&#xff0c;我能做什么&#xff1f;通过此次课程&#xff0c;我们将学会如何自定义自己的模块和包&#xff0c;以及如何引用到自己的项目中&#xff0c;从而实现代码的复用。学习此次课程&#xff0c;需要多久&#xff1f;5-10分钟课程内容什么是Python的标准库&a…

windows.h和winsock2.h包含顺序问题(转)

windows.h和winsock2.h有类型重定义我是知道的&#xff0c;本来就一个库来说没问题&#xff0c;把winsock2放到windows.h前或先定义WIN32_LEAN_AND_MEAN都能解决问题但现的出了问题&#xff0c;自己写的一个库里要用到ws2tcpip&#xff0c;这个头文件第一个包含的头文件就是win…