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); %修…

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

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

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

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

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

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

红色警戒2修改器原理百科(七)

&#xff08;十五&#xff09;科技全开——前方高能&#xff0c;BOOM 其实这一小节&#xff0c;最晚应该在第四篇的十小节来讲述的&#xff0c;这样是按照一条线索来讲的&#xff0c;容易理解和把握笔者修改时的思路&#xff0c;以一点逐渐扩大。由于笔者的一些原因&#xff08…

wpf click事件在触摸屏上点击第一次没反应_你的PLC和你的触摸屏为什么总是通讯不上?...

三菱PLC全系列资料免费送啦&#xff01;想要撩我(点击上方红字&#xff0c;免费领资料)很多师傅有以下这些问题&#xff0c;其实除去厂家自行定义的通讯方式外&#xff0c;我们在做项目的时候最常用的通讯方式&#xff0c;通讯不上无非就是这几个原因是否选择正确通讯协议(modb…

ubuntu 开放端口_Masscan端口扫描工具使用小手册

1Masscan介绍1.1 Masscan简介1) nmap是端口扫描仪的合法王位&#xff0c;而今天仍然是最通用的选择。但对于纯粹的速度也有一些已经超越了它&#xff0c;包括scanrand&#xff0c;unicornscan&#xff0c;zmap&#xff0c;和现在的masscan(https://github.com/robertdavidgraha…

hdu4277 暴力

hdu4277 暴力 USACO ORZ Time Limit : 5000/1500ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) Total Submission(s) : 4 Accepted Submission(s) : 2 Problem DescriptionLike everyone, cows enjoy variety. Their current fancy is new shapes for pastu…

多线程设置操作时间间隔_听说,有位Java程序员学完这59道多线程面试题之后,直接面上阿里...

前言多线程是指从软件或者硬件上实现多个线程并发执行的技术。具有多线程能力的计算机因有硬件支持而能够在同一时间执行多于一个线程&#xff0c;进而提升整体处理性能。具有这种能力的系统包括对称多处理机、多核心处理器以及芯片级多处理或同时多线程处理器。软件多线程&…

svm多分类代码_监督学习——分类算法I

本文是监督学习分类算法的第一部分&#xff0c;简单介绍对样本进行分类的算法&#xff0c;包括判别分析(DA)支持向量机(SVM)随机梯度下降分类(SGD)K近邻分类(KNN)朴素贝叶斯分类(NaiveBayes)判别分析(Discriminant Analysis) 判别分析是基于条件概率的分类方法&#xff0c;可以…

oracle awr报告提取,Oracle AWR报告提取方法

默认情况下&#xff0c;oracle是启用数据库统计收集这项功能(AWR)通过show parameter statistics_level来判断是否启用值为TYPICAL或者ALL表示启用AWR值为BASIC&#xff0c;表示禁用AWR1.当前连接实例的AWR报告提取&#xff1a;?/rdbms/admin/awrrpt以sysdba身份登录。SQL>…

关键词组合工具_SEO学习:如何挖掘行业关键词?关键词挖掘策略和工具推荐

关键词是驱动流量增长的基础&#xff01;挖掘关键词是SEO工作的重中之重。如何快速挖掘到行业相关的所有关键词&#xff1f;我们一起了解下。本文大纲如下&#xff1a;拓展和筛选网站主词挖掘搜索引擎推荐关键词业务相关词的挖掘同行关键词的挖掘关键词组合拓展1、拓展和筛选网…

活体检测python_活体检测很复杂?仅使用opencv就能实现!(附源码)!

摘要&#xff1a; 活体检测在各行各业应用比较广泛&#xff0c;如何实现一个活体检测系统呢&#xff1f;早期实现很困难&#xff0c;现在仅使用opencv即可实现&#xff0c;快来尝试一下吧。什么是活体检测&#xff0c;为什么需要它&#xff1f;随着时代的发展&#xff0c;人脸识…

oracle安装命令大全,oracle安装教程及常用命令

虽然网上已经有很多安装教程了,但还是写一个记录一下自己的安装过程以及遇到问题的解决办法1 安装包下载:去oracle的官网 选择DownLoads->database->oracle database:选择接受选择Windows 64的下载,选择file1,和file2,注意两个文件都要下载,下载时要求登录,有oracle账户的…

规格选择_日常使用的拉杆箱脚轮选择哪种规格最合适?

大家可能在采购拉杆箱脚轮的时候&#xff0c;都会有一个问题&#xff0c;拉杆箱脚轮规格选择哪种比较好呢&#xff1f;万向轮好还是单向轮&#xff1f;是万向轮还是单向轮比较耐磨&#xff1f;脚轮厂家诺贝小编接收到大家的疑问&#xff0c;接下来将告诉大家拉杆箱脚轮选择的规…

ERROR: JDWP Transport dt_socket failed to initialize, TRANSPORT_INIT(510)

1   ERROR: transport error 202: bind failed 2 ERROR: JDWP Transport dt_socket failed to initialize, TRANSPORT_INIT(510) 3 JDWP exit error AGENT_ERROR_TRANSPORT_INIT(197): No transports initialized [../../../src/share/back/debugInit.c:690] 4 …

php session存到redis,php Session存储到Redis的方法

php Session存储到Redis的方法当然要写先安装php的扩展&#xff0c;可参考这篇文章&#xff1a;Redis及PHP扩展安装修改php.ini的设置复制代码 代码如下:session.save_handler redissession.save_path “tcp://127.0.0.1:6379″修改后重启php-fpm或nginx&#xff0c;phpinfo(…

ajax ssm 页面跳转_SSM框架的面试常见问题

阅读文本大概需要9分钟。一、Spring面试题1、Spring 在ssm中起什么作用&#xff1f;Spring&#xff1a;轻量级框架作用&#xff1a;Bean工厂&#xff0c;用来管理Bean的生命周期和框架集成。两大核心&#xff1a;IOC/DI(控制反转/依赖注入) &#xff1a;把dao依赖注入到service…

运维工程师绩效考核表_IT运维存在问题及改进

欢迎大家一起学习交流https://t.zsxq.com/imimAYF​t.zsxq.com1.1 IT运维机制不完善&#xff0c;流程操作层面缺乏统一 没有建立起稳定、规范的IT运维机制。现有的IT运维流程的操作层面缺乏统一。如事件单提交之后&#xff0c;事件预判和优先级的设定缺少统一、规范的指导文档&…

在linux中 要删除abc目录,操作系统原理与应用(linux)A卷

福州外语外贸职业技术学院2010-2011学年第一学期(期末)试卷09 级网络系统管理专业操作系统原理与应用(linux)科目(A )卷课程代码考试形式闭卷考试时量 120 分钟姓名__ _______ _级班学号____ __1.操作系统是一种( )A.系统软件B.系统硬件C.应用软件D.支援软件2.MS—DOS的存贮管理…