用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文件

var _treeTableIcons = {};
// 树结点是否有竖线，因为如果有竖线的话，行高过高，线就不能连在一起，很难看，最好像windows的资源管理器一样，不要添加结点之间的连线。默认也是不添加连线的
var showLine = false;
if (showLine) {
	_treeTableIcons['empty'] = 'images/empty.gif';
	_treeTableIcons['folder'] = 'images/folder.gif';
	_treeTableIcons['folderopen'] = 'images/folderopen.gif';
	_treeTableIcons['join'] = 'images/join.gif';
	_treeTableIcons['joinbottom'] = 'images/joinbottom.gif';
	_treeTableIcons['line'] = 'images/line.gif';
	_treeTableIcons['minus'] = 'images/minus.gif';
	_treeTableIcons['minusbottom'] = 'images/minusbottom.gif';
	_treeTableIcons['nolines_minus'] = 'images/nolines_minus.gif';
	_treeTableIcons['nolines_plus'] = 'images/nolines_plus.gif';
	_treeTableIcons['page'] = 'images/page.gif';
	_treeTableIcons['plus'] = 'images/plus.gif';
	_treeTableIcons['plusbottom'] = 'images/plusbottom.gif';
} else {
	_treeTableIcons['empty'] = 'images/empty.gif';
	_treeTableIcons['folder'] = 'images/folder.gif';
	_treeTableIcons['folderopen'] = 'images/folderopen.gif';
	_treeTableIcons['join'] = 'images/empty.gif';
	_treeTableIcons['joinbottom'] = 'images/empty.gif';
	_treeTableIcons['line'] = 'images/empty.gif';
	_treeTableIcons['minus'] = 'images/nolines_minus.gif';
	_treeTableIcons['minusbottom'] = 'images/nolines_minus.gif';
	_treeTableIcons['nolines_minus'] = 'images/nolines_minus.gif';
	_treeTableIcons['nolines_plus'] = 'images/nolines_plus.gif';
	_treeTableIcons['page'] = 'images/page.gif';
	_treeTableIcons['plus'] = 'images/nolines_plus.gif';
	_treeTableIcons['plusbottom'] = 'images/nolines_plus.gif';
}

function TreeTable(layout, model, divId, id) {
	this.divId = divId;
	this.mapping = {};
	this.model = model;
	this.layout = layout;
	this.addNode = _addNode;
	this.startup = _startup;
	this.setRoot = _setRoot;
	this.getRoot = _getRoot;
	this.expandNode = _expandNode;
	this.expandAll = _expandAll;
	TreeTable.prototype.instants[this.id = id ? id : TreeTable.prototype._treeIdPrefix + TreeTable.prototype.index++] = this;
}

function TreeNode(item) {
	this.item = item;
	this.nodes = [];
}

TreeTable.prototype._treeIdPrefix = 'treeTable_';
TreeTable.prototype.instants = {};
TreeTable.prototype.index = 0;
TreeNode.prototype.index = 0;

function _addNode(parentNode, childNode) {
	if (parentNode) {
		childNode.parentId = parentNode.id;
		childNode.id = parentNode.id + '_' + TreeNode.prototype.index++;
		parentNode.nodes[parentNode.nodes.length] = childNode;
		childNode.parent = parentNode;
	} else {
		childNode.id = this.id + '_' + TreeNode.prototype.index++;
	}
	childNode.isOpened = true;
	this.mapping[childNode.id]=childNode;
}

function _getRoot() {
	return this.rootNode;
}

function _setRoot(rootNode) {
	this.addNode(null, rootNode);
	this.rootNode = rootNode;
}

function _startup() {
	if (this.layout && this.layout.constructor == Array && this.layout.length > 0) {
		_makeupNodes(this);
		var tableHeaderStr = '<thead class="treeTableHeader"><tr>';
		for (var i = 0; i < layout.length; i++) {
			var headerClass = this.layout[i].headerClass ? ' class="' + this.layout[i].headerClass + '"' : '';
			tableHeaderStr += '<td' + headerClass + '>' + this.layout[i].name + '</td>';
		}
		tableHeaderStr += '</tr></thead>';
		var tableStr = '<table id="' + this.id + '" class="treeTable">' + t