因项目需要,需要在表格中加入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. Android动画之Interpolator和AnimationSet

    AnimationSet可以加入Animation,加入之后设置AnimationSet对加入的所有Animation都有效. AnimationSet anim=new AnimationSet(t ...

  2. Java学习之路(五)

    1:补充: 使用super也可以调用父类的成员函数  格式 :  super.函数名(); 2:抽象类与抽象函数 抽象函数的定义: 只有函数的定义,没有函数体的函数被称为抽象函数 抽象类的定义: 使用 ...

  3. uva 437,巴比伦塔

    题目链接:https://uva.onlinejudge.org/external/4/437.pdf 题意:巴比伦塔: 给出n种立方体,一个立方体能放到另一个立方体上,必须满足,底面一定要小于下面的 ...

  4. 好玩的代码之C++实现CPU满载

    #include <windows.h> #include <iostream> #include <cstdlib> using namespace std; D ...

  5. linux rc.sysinit文件详解

    /etc/rc.d/rc.sysinit 系统初始化脚本的任务 .激活udev和selinux .根据/etc/sysctl.conf文件设定内核参数 .设定系统时钟 .装载键盘映射 .启用交换分区 ...

  6. ContentProvider官方教程(2)简介、Content URIs

    In this document Overview Accessing a provider Content URIs Content Provider Basics A content provid ...

  7. Ubuntu安装后的一些配置

    对新安装的Ubuntu的一些配置: #移除无用包 apt-get remove libreoffice-common apt-get remove unity-webapps-common apt-g ...

  8. 【leetcode❤python】83. Remove Duplicates from Sorted List

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

  9. Java——再看IO

    一.编码问题 utf-8编码中,一个中文占3个字节,一个英文占1个字节:gbk编码中,一个中文占2个字节,一个英文占1个字节. Java是双字节编码,为utf-16be编码,是说一个字符(无论中文还是 ...

  10. 键盘unicode值对照表

    A:65 B:66 C:67 D:68 E:69 F:70 G:71 H:72 I:73 J:74 K:75 L:76 M:77 N:78 O:79 P:80 Q:81 R:82 S:83 T:84 ...