轻松转换普通表格为TreeTable“终篇”

 

  最近做的一个项目用的是Sun JSF1.2页面框架，页面仅用了html,js,JSTL和Facelets也没使用JSF的Grid组件。

有个区域字典管理界面，在页面使用JSTL生成个简单的表格，数据是按数据库id排序的很是难看。

区域字典本身是树形的，想要变成TreeTable。

QuipuKit的JSF树形表格组件不错，可惜是商业的。

内部开发，这种系统管理界面的后台服务代码能简就简没打算采用Ajax。

所以就做了这个TreeTable插件，把客户端页面上的表格重新渲染一遍。

  效果图：


  css样式是用的网上找的

  用法：
 

$.treetable.defaults={
			id_col:0,//ID td列 {从0开始}
			parent_col:1,//父ID td列
			handle_col:2,//加上操作展开操作的 td列
			open_img:"images/minus.gif",
			close_img:"images/plus.gif"
		}
$("#tbody").treetable();

  

  源代码和示例下载

   代码中并没有构建树对象，取而代之的是一个树的偏序遍历顺序数组。所以展开收起部分实现和一般的不同。 

   排序的性能还需测试，Demo.html和jquery.treetable.js中有详细的注释。希望能多提宝贵意见。

 

---------------------------------------------------------------------更新分割线-------------------------------------------------------------------------------

 

 更新源代码，修复了使用图标判断是否展开那种蹩脚的方式，因为图片路径为"../../"时会出错。

 

 谢谢quaff 提到的http://plugins.jquery.com/project/treetable，这个插件比较好用。

 

 只是没有对树进行排序，如图：

 

我将在它的基础上加上排序的功能，见代码：

 

 $.fn.sort = function(){
	$(this).find("tbody tr").each(function() {
	    var tmp = $("<tr></tr>");
		$(this).parent().prepend(tmp);
		if(parentOf($(this))==null){
			move($(this), tmp);
		}
		tmp.empty();
	  });
  }

 

使用的时候自己根据需要使用sort方法

 

 $(document).ready(function() {

    $(".example").treeTable({
      initialState: "expanded"
    }).sort();//不使用排序就去掉.sort()

}

 

 

我自己的版本就不再更新放出了。
 

----------------------------------------------------------------------------------------------------------------------------------------------------

 

不错，展现树形结构数据非常好。要是能动态加载就好了

http://plugins.jquery.com/project/treeTable

这里有个plugin,是用id和class来确定父子关系的,树形表和原始表的列是一样的,这样是不是侵入性更小?

谢谢回复，因为说明了不采用Ajax，即不考虑和后台交互所以不会实现动态加载

谢谢您提供的这插件，看来应该多上plugins.jquery.com再动手。

我看了它的代码，使用id和class来确定父子关系，确定父子关系直接使用jquery的选择器查询优雅多了。

这样展开函数的代码就好写，我已更新了帖子。准备转到这个插件，添加排序功能。

排序的功能不要默认启动,默认还是用tr的顺序吧

希望楼主在它的基础上再美化一下,用连在一起的+ -图标代替它的箭头
可以参考jquery treeview的demo

http://jquery.bassistance.de/treeview/demo/

可以参考一下
jquery.treeview.async.js
用proxy的方式做一个扩展实现动态加载功能

http://jquery.bassistance.de/treeview/demo/ 我动手前也看了一下，是针对ul-li的我准备用来做菜单。

连在一起的+ -图标，你可以查看http://www.hanpau.com/extra/jqtreetable.zip

我也不打算重复发明轮子了，这篇帖子算是结了。谢谢！

我也想要这样的 可是找不到啊

运行之后，表格是反序排序的，如果把顺序正过来就好了。。