因项目需要,需要在表格中加入tree,使用了jquery的tree table,经美化,完美兼容各种框架的table;

  请移步下载tree table 的js文件及css文件等,http://ludo.cubicphuse.nl/jquery-treetable/;

用到css文件:<link rel="stylesheet" href="../../style/jquery.treetable.css">

<link rel="stylesheet" href="../../style/jquery.treetable.theme.default.css">

用到js文件:<script src="../../js/jquery-1.10.1.min.js"></script>

<script src="../../js/bootstrap-treeview.min.js"></script>

使用示例:

<table id="tableId">
<tr data-tt-id="1">
<td>Parent</td>
</tr>
<tr data-tt-id="2" data-tt-parent-id="1">
<td>Child</td>
</tr>
</table>
data-tt-id为2的tr  通过data-tt-parent-id指向1节点,意思就是第二个tr是第一个tr的子节点;

一行js搞定,$("#tableId).treetable({expandable : true});

层级复杂的表格通过后台递归查询查出数据list后,可以通过判断该节点是否具有父节点来给tr增加parent_id,看示例:

var trArr = $("#tableId tr");

for (var i = 0; i < trArr.length; i++) {
$("#tableId tr:eq(" + i + ")").attr(
"data-tt-id", tabledate[i].orgId);
if (tabledate[i].parentOrg != '') {
$("#tableIdtr:eq(" + i + ")").attr(
"data-tt-parent-id", tabledate[i].parentOrg);
}
}

 


jquery的tree table(树表)的更多相关文章

  1. 查找算法(5)--Tree table lookup--树表查找

    1.树表查找 (1) 最简单的树表查找算法——二叉树查找算法. [1]基本思想:二叉查找树是先对待查找的数据进行生成树,确保树的左分支的值小于右分支的值,然后在就行和每个节点的父节点比较大小,查找最适 ...

  2. C#结合Jquery LigerUI Tree插件构造树

    Jquery LigerUI Tree是Jquery LigerUI()的插件之一,使用它可以快速的构建树形菜单.呵呵 废话不说了,直入正题,下面介绍C#结合ligerui 构造树形菜单的两种方法 1 ...

  3. Fancytree Javascript Tree TreeTable 树介绍和使用

    Fancytree是一个非常棒的Javascript控件,功能强大,文档健全.在做Javascript Tree控件选型时,主要基于以下几点选择了Fancytree 在Javascript Tree控 ...

  4. 使用jQuery,实现完美的表单异步提交

    jQuery异步提交表单 <form id="form1" method="post"> <table border="1" ...

  5. Mysql存储引擎之TokuDB以及它的数据结构Fractal tree(分形树)

    在目前的Mysql数据库中,使用最广泛的是innodb存储引擎.innodb确实是个很不错的存储引擎,就连高性能Mysql里都说了,如果不是有什么很特别的要求,innodb就是最好的选择.当然,这偏文 ...

  6. poj 3321:Apple Tree(树状数组,提高题)

    Apple Tree Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 18623   Accepted: 5629 Descr ...

  7. Jquery easyui tree的使用

    这个ui用的一切都是json数据.树也是如此! 后台需要返回与格式匹配的json数据才能正确加载树. 页面定义一个ui: <ul id="messageInfoAddTree" ...

  8. ext树表

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA2UAAAHwCAIAAACpIFDdAAAgAElEQVR4nOy9f5Qb5ZnvWWQZlnO5Oc ...

  9. jquery实现ajax提交form表单的方法总结

    本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一:  function AddHandlingFeeToRefund( ...

随机推荐

  1. 驱动之module_init/module_exit

    在前面helloworld的编写里面,我们使用了两个宏分别是module_init和module_exit,这里分析下为什么使用这两个宏. 在写模块的时候有两个特殊的函数,分别是init_module ...

  2. Java提高篇---Map总结

    一.Map概述 首先先看Map的结构示意图 Map:"键值"对映射的抽象接口.该映射不包括重复的键,一个键对应一个值. SortedMap:有序的键值对接口,继承Map接口. Na ...

  3. linux系统中如何查看日志 (常用命令2)

    cat tail -f 日 志 文 件 说 明 /var/log/message 系统启动后的信息和错误日志,是Red Hat Linux中最常用的日志之一 /var/log/secure 与安全相关 ...

  4. Storm系列之二——Guaranteeing Message Processing

    Storm保证每跳离开spout的消息都会被完全处理.本文介绍Storm是怎么保证每条消息都被完全处理并且作为用户该怎么做才能从Storm的可靠性保证受益. 1.什么叫消息被完全处理? 一个tuple ...

  5. ubuntu APT-GET工作原理

    转 http://kurenai.elastos.org/2013/05/02/ubuntu-apt-get%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86/   先介绍几个和 ...

  6. 双4G LTE

    我们即将上市的Xplay3S将支持双4G LTE(TDD-LTE+FDD-LTE),那什么是4G LTE呢,今天来给大家科普下4G LTE网络知识. 什么是TDD-LTE/FDD-LTE? LTE是通 ...

  7. 【leetcode❤python】26. Remove Duplicates from Sorted Array

    #-*- coding: UTF-8 -*-class Solution(object):    def removeDuplicates(self, nums):        "&quo ...

  8. 【leetcode❤python】24. Swap Nodes in Pairs

    #-*- coding: UTF-8 -*- # Definition for singly-linked list.# class ListNode(object):#     def __init ...

  9. BZOJ 3551 Peaks加强版

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3551 题意:给出一个图,n个点,m条边.边有权值点也有权值.若干询问,(v,x,k),问从 ...

  10. ios runtime的相关知识

    一.iOS runtime原理 对于runtime机制,在网上找到的资料大概就是怎么去用这些东西,以及查看runtime.h头文件中的实现,当然这确实是一种很好的学习方法,但是,其实我们还是不会知道r ...