用javascript实现的TreeTable, 可以当做树(Tree)用
本文版权归作者所有，仅供用来网上学习来用，读者可以收藏，请不要下载到本机和重新发布到其它网站

有觉得可以改进的，请留言，也可加群讨论71326533


近日，需要做一个关于Service的Mapping, 因为排版的需要，需要一个TreeTable，我们用的js框架是dojo，但是定制dojo(1.4)很困难，且我们这个tree table不需要太多的功能，所以最终决定自己实现一个，API类似于dojo的TreeGrid, 因为涉及版权问题，我采用了纯js的方法。目前这个tree table可以在firefox和IE6.0+上运行

看网上有几种tree table的实现，都是先把表格或数据填好，然后再对表格进行处理，但是很少有需求是这样，实际应用中，数据可能就是JSON对象，这个JSON对象有自己的结构。用户需要把这个JSON用TreeTable的形式展现出来。

这个TreeTable，如果只有一列的话，就是常用的Tree控件了

这是我写的TreeTable.js文件

默认TableTree.css文件


因为测试用的代码不想把json对象hardcode到js文件中,所以使用了ajax去读取json对象，引入了jquery的代码，也可以用其它的ajax框架，或直接用xmlRequest对象。

测试用的JS文件(TreeTableTest.js)代码:


目前TreeTable支持每个单元格的css, style和icon的定制，且方法极其简单。对于列和单元格中的数据展示都可以定制，很灵活。

需要的css文件(TestTreeTable.css)代码如下:
function getNode(trId) {var trNode = document.getElementById(trId);if (trNode) {var parentNode = trNode.parentNode;while (parentNode.tagName.toLowerCase() != 'table') {parentNode = parentNode.parentNode;}var treeTable = TreeTable.prototype.instants[parentNode.id];return treeTable.mapping[trId];}return null;}


非常感谢!    3 楼    tianlihu    2010-06-29              目前些TreeTable没有实现编辑功能，还有就是模型的事件通知功能，可以采用MVC做，利用模型驱动