11月，种一棵树

11月过后，北方正式进入寒冬。整个11月，我都在种一棵树，确切的说，我是在建造一个 Web 页面上的树形菜单，并实现其编辑和存储的问题。

我一直一来都喜欢树形菜单，最具体的体现就是我从来都是通过“资源管理器”来管理 Windows 的文件夹。树形菜单直观、简洁，界面布局简单，逻辑清晰。每门语言我都在试图操作其树形结构的菜单，从 VB 开始，到 Delphi、ASP.NET，而 Javascript 自然不能例外。

表面越简洁的东西，身后的逻辑一般越复杂，这似乎是一条规律，树形菜单也是这样。首先是用数据库表这种二维的结构化的数据结构怎么描述和存储树形菜单的问题。好在这个问题已经被天才的程序员们给解决了，而且实现得几乎接近完美。

其次是怎么在Web页面呈现这些树形的逻辑结构。这是一个关键的地方。如果是简单的呈现，则比较容易，取出数据，摆成一个树的形状就可以了。但如何实现桌面编程那样的对树形菜单的增删改操作就不是简单的了。事实上我的精力大量的都花在了这里。首先考虑是自己实现这些功能，但马上就否决了这个愚笨的想法 - 现在不是“造轮子”的时代了，要学会站在巨人的肩膀上嘛。

于是决定选择一个成熟的 js 树形菜单组件。把网上的爱好者和好事者做的那些可疑的东西过滤掉之后，最后选择了三个：jQuery 的 simpleTree，xTree，和 DhtmlxTree。simpleTree 和 xTree 呈现树形菜单非常优秀，通过 Ajax 技术可以实现菜单节点的动态打开，这样就可以“在几秒钟加载几百万条记录”，这是一种优秀的设计，尽管实际上是一种“造假”的技术，看不见的数据实际上就是不存在的，等我们要看的时候他才临时去取回来。但 simpleTree 和 xTree 对 js 树形菜单实际上没有编辑功能，数据库里数据更新后，必须对整棵树的节点进行刷新，再定位到当前节点就是一个不能完成的任务，用户体验十分差。在消耗了大量的时间熟悉、测试了 simpleTree 和 xTree 之后，最后还是放弃了它们。

DhtmlxTree 是我遇到的目前几乎最好的树形菜单。网上流传的是它的 1.5 标准版(free fee)，但它的1.3专业版才是一个确实可用的版本，功能多、bug少，但它是需要付费的，几百美元。在网上偶尔才获得了它的1.3专业版，还是一个网友“冒死”从国外搞回来的，当然对我来说它就是盗版了。

DhtmlxTree 现在的最新版是 2.0 版，已经是 dhtmlxSuite2.0 套件的一部分了（http://www.dhtmlx.com/）。dhtmlxSuite2.0 套件包括了大量的 web 前端组件，也分免费的标准版（遵照 GPL license 许可发行）和收费的专业版（有 Commercial License 和 Enterprise License许可）。可惜的是，正好在我用到的 DhtmlxTree2.0 标准版里有一个致命的 bug，不得不放弃，只能使用较低的版本，还好，够用。

树形菜单的编辑、存储，和关系数据库二维数据的操作有很大的不同，必须通过程序(我用了 Ajax 技术)使数据库和 tree 的形状在编辑的同时保持同步，而且在下次打开时不失形，即级别、前后、父子关系不乱套。因为“关系”是树的主要逻辑，所以必须有节点的移动功能，不然用户操作起来很麻烦，我实现了同级别兄弟节点(sibling)的上下移动功能。节点长距离移动也能实现，因涉及到复杂的界面操作，同时考虑到我目前是编辑网站的树形栏目，这个功能需求意义不大，砍掉了。以后若实现的话，想加上节点的拷贝功能，这样建立新节点就方便点了。节点的前后关系在表里必须以一个排序字段来记录，因为按照什么来排序都不合适。但排序问题一直一来就是一个问题，我并不认为我的排序的做法(叫“算法”有点脸红)是很好的，但请教一些号称做过 erp 的程序员，他们也是莫衷一是，看来只能这样了 - 希望2009版本解决这些问题，:)。

搞这个无限级树形菜单编辑系统，最大的工作量和难度不是操作数据库，而是选择Web前端的 js 组件，以及熟悉它、操作它，特别是与后端的表进行同步。我用了 jQuery 框架还稍微快一点，应当说还减少了浏览器的兼容性问题。

11月的大部分时间，我都耗在这棵树上，实际上是耗着心血和生命。要么是把这棵树养活，要么是我吊死在这棵树上，很多次我面临着选择。很多次的山重水复和柳暗花明，很多次去网上寻找答案，很多次在走路中冥想，终于把一棵树养成今天这个样子：不是一棵大树，也不是一棵简单的树。

张庆(网眼) 2008-11-30
来自“网眼视界”：http://blog.why100000.com
“十万个为什么”电脑学习网：http://www.why100000.com
CSDN博客：http://blog.csdn.net/zhangking