轻松转换普通表格为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()

}

 

 

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

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