jquery的tree table(树表)

  因项目需要,需要在表格中加入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);
}
}

 


时间: 2024-11-03 05:04:56

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

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

1.树表查找 (1) 最简单的树表查找算法——二叉树查找算法. [1]基本思想:二叉查找树是先对待查找的数据进行生成树,确保树的左分支的值小于右分支的值,然后在就行和每个节点的父节点比较大小,查找最适合的范围. 这个算法的查找效率很高,但是如果使用这种查找方法要首先创建树. [2]二叉查找树(BinarySearch Tree,也叫二叉搜索树,或称二叉排序树Binary Sort Tree)或者是一棵空树,或者是具有下列性质的二叉树: 1)若任意节点的左子树不空,则左子树上所有结点的值均小于它的

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

Apple Tree Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 18623   Accepted: 5629 Description There is an apple tree outside of kaka's house. Every autumn, a lot of apples will grow in the tree. Kaka likes apple very much, so he has been

jQuery 动态加载树

本案例中用到了jquery的 tree插件,在本文的附件中可以下载 jsp代码: <%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request

JavaScript之jQuery-8 jQuery 使用插件(zTree树插件、jQuery UI插件)

一.jQuery zTree树控件 zTree介绍 - zTree 是利用jQuery的核心代码,实现一套能完成常用功能的Tree插件 - 兼容IE.FireFox.Chrome 等主流浏览器 - 支持 JSON 数据 - 支持一次性静态生成和Ajax异步加载两种方式 - 支持tree的节点移动.编辑.删除 zTree使用步骤 - step 1: 下载zTree相关文件(js.css) - 下载地址: http://www.ztree.me/ - step 2: 引入相关文件 - css: 样式

ext树表

如上是效果图: 做成简单的树表: 具体代码如下: 前台jsp: <%@ page language="java" contentType="text/html; charset=UTF-8"%> <%@ include file="/WEB-INF/views/commons/taglibs.jsp"%> <html> <head> <script type="text/javasc

Jquery easyui tree的使用

这个ui用的一切都是json数据.树也是如此! 后台需要返回与格式匹配的json数据才能正确加载树. 页面定义一个ui: <ul id="messageInfoAddTree" class="easyui-tree" checkbox="true" data-options="lines:true" style="height:94%"></ul> JS访问后台: //人员树 $('

基于jQuery会员中心安全修改表单代码

基于jQuery会员中心安全修改表单代码.这是一款登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="Safety"> <dl> <dt> <strong>登录密码:</strong> <span>保障账户安全,建议您定期更换密码</span> <b><span

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

jQuery异步提交表单 1 <form id="form1" method="post"> 2 <table border="1"> 3 <tr> 4 <td>用户名:</td> 5 <td> 6 <input type="text" name="loginName" /></td> 7 </tr>

jquery 预览提交的表单

预览表单,查看后确认提交或者返回重填 演示 XML/HTML Code <form class="mform" id="myform" method="POST" id="myform" action=""> <fieldset> <legend>Registeration</legend> <table cellspacing="0"