无限级节点树
要实现无限级的功能，如果没有什么小技巧，好象就只能递归了。不过需要注意一定要有个正确条件判断来return，避免死循环。从数据的存放结构来说，一般我们数据库里保存有id、name、parentId字段，树结构里仍然保存这种结构，在展开树节点的时候我们需要根据id获取它所有的子节点，并保存起来，避免第二次重复遍历。
层次关系结构
我这里是想说，呈现出来的HTML具有层次关系，每一个树节点对象有层次关系。HTML层次关系表现为子节点的元素一定是父节点的元素的子节点，本来我觉得这并不是必须的，后来我发现只有这样做才能保持子子节点的状态，比如我点击一级节点只需要展开所有的二级节点，三级或四级节点的状态不需要改变，HTML结构有这种层次关系支持就很容易实现。与之相对应的是树节点对象，它保存着父节点对象、子节点集合对象、引用元素等等，以方便递归调用，这些信息都被附加到对应的dom元素上。
带checkbox和radio选择
实际项目的需求都是复杂多变的，有时候我们需要提供radio单选功能，有时候可能需要提供checkbox多选功能，为了能在后台直接获取选择的值，提供带checkbox和radio选择功能也是必须的。当然，是否创建checkbox或radio我们可以在实例化时配置指定，每一个节点初始化时是否选中也可设置指定，这里需要注意的是我们直接创建checkbox和radio是不能指定name属性的，转个弯换种思路来实现即可。
var inputTemp = document.createElement('div');
inputTemp.innerHTML = '<input type="radio" name="ids" />';
var inputElem = inputTemp.childNodes[0];
只绑定一个click事件
看似较复杂的树结构，其实我只给最外面的容器元素绑定了一个click事件而已，另外点击checkbox的联动也是在这个click事件里处理的，因为元素的事件是会向父元素冒泡触发的，并且很容易使用事件对象event获取触发源元素，因此我就能获取你点击是checkbox还是什么其他的元素了，很方便。这样做的好处就是集中来处理一个事件，而不需要臃肿的给每一个元素添加事件，充分展示代码的优雅之美。
演示效果： http://demo.jb51.net/js/tree_json/TreeMenu.htm
打包下载地址 JavaScript 多种树结构菜单效果
本文转载自金龙博客：http://www.jonllen.com/jonllen/js/menu.aspx，转载请保留此段声明。
