带有『选择次数排序』和『搜索』功能的树形控件设计与实现
一、思想创意
树形控件是软件操作界面中最常见的一种数据展现控件，如下图所示：
图1
这就是我们常见的树形结构，目前有很多树控件可以供我们选择使用，如zTree、Ext中的树控件，等等。
树形控件这么多，但实现的功能就是上面这张图，树形结构图，用来展现具有层次结构的数据项。那么树形控件能否改进一下，实现更加灵活、便捷的功能呢？让我们先来看几个用例场景。
这是某某管理信息系统的操作界面，如图所示：
图2
界面中有一个输入域是选择家庭住址，采用的是下拉树的形式。默认展开第一层节点，也就是北京市下属的“区”名称，操作员可以通过点击“区”名称前面的加号，展开某个区，例如上图中，操作员展开了 “北京市→顺义区→木林镇→荣各庄村”，家庭住址细化到村一级。利用下拉树的形式，让操作员选择，可以避免操作员手工输入时发生的错误。但是这样做也有缺点，操作员选择起来很麻烦，北京市顺义区下面的村镇有很多，操作员要找到某个村，很费劲，得展开很多级节点，而且还要在数百个村镇中找到要选择的那一个。
能不能在下拉树的基础上，改进一下，使得操作员选择起来更加快捷、方便呢？看下面这个图，这是改进之后的界面：
图3
在下拉树上面增加几个功能，一个叫“排序”，一个叫“恢复默认”，还有一个叫“搜索”，下面依次介绍这几个功能。
1、搜索
先说搜索功能，这里所谓的搜索，就是操作员在输入框中输入一个关键字，然后点击“搜索”按钮，下面展示出包含关键字的树形结构，例如操作员在输入框中输入“村”字，点击搜索按钮，界面显示如下：
图4
下拉树中显示出带有“村”字的地名，包括二郎庙村、一街村、荣各庄村。如果操作员想选择“荣各庄村”的话，很容易就找到了。这个功能就是通过搜索树节点的关键字来缩小查找范围，使得操作员更快捷的找到所需选项。
这个功能有点类似于列表查询功能，如图所示：
图5
在查询条件输入框中输入查询关键字，点击查询按钮，列表中显示出满足条件的查询结果，供用户选择。
但是对树形结构的搜索是比较复杂的，需要从整棵树的根节点开始，逐个节点过滤，把包含关键字的节点全部找到，然后给用户展示出来。要实现这个功能，首先需要对整棵树进行全加载，而不是延迟加载，然后在客户端利用JavaScript编程实现节点搜索功能，最后把搜索出的节点展示出来。
搜索功能先介绍到这儿，后面会详细介绍实现方法。
2、排序
有了搜索功能，操作员就很容易通过关键字找到他所需的选项，但是有些操作员觉得输入文字比较麻烦，能不能不用输入文字，也能更快的找到所需选项呢？这就是排序功能。
这个功能是一种智能化的功能，这个排序不是简单的列表排序，一般的列表排序如下图所示：
图6
上图中的数据列表，表头列上有『上下箭头（∧∨）』图标，用户点击排序箭头后，系统按该列进行排序，每一列表头上都有排序图标，用户可以按照任何一列进行排序。
树形结构默认也有顺序，一般是按照节点编号或节点名称排序，每一层节点都按照节点编号或节点名称排序，类似于Oracle中的层次查询排序，也就是兄弟节点排序，这是通常的排序方式。
那么，我们这里所说的“排序”指的是什么意思呢？这里所说的排序方式不是按照节点编号或者节点名称进行兄弟节点排序，而是按照节点的“选择次数”排序。
“选择次数”指的就是某一节点被操作员选择的次数（也就是被操作员点击的次数）。例如，“北京市→顺义区→木林镇→荣各庄村”，荣各庄村被操作员选择过8次，荣各庄村的选择次数就是8； 而“北京市→顺义区→杨镇→李各庄村”，李各庄村被操作员选择过3次，李各庄村的选择次数就是3。按“选择次数”排序，可以使选择次数高的节点排在树形结构的前面，使操作员可以优先找到选择次数高的节点，这些节点很可能就是操作员这一次选择时仍然要选择的节点（至少选择的概率比较大）。例如，荣各庄村被选择过8次，李各庄村被选择过3次，那么，操作员这一次还有可能选择荣各庄村，这是一种合理的推论，就是说操作员以前频繁选择哪个节点，那么下一次还可能选择那个节点。把选择次数高的节点排在树形结构的前面，有利于操作员寻找他频繁选择过的节点。
看下面两张图，
图7
图8
图7是操作员点击『排序』之前的下拉树界面，图8是操作员点击『排序』之后的下拉树界面，假如荣各庄村被操作员选择过8次，其它村庄的选择次数都比荣各庄村少，操作员点击『排序』之后，系统经过计算，将“北京市→顺义区→木林镇→荣各庄村”排在了树形结构的前面，顺义区排在了海淀区前面，木林镇也排在了杨镇前面，而排序之前，顺义区是排在海淀区后面的，木林镇是排在杨镇之后的。树形结构的排序比普通的列表排序要复杂，它复杂在：移动子节点的同时，也要移动它的父节点，这样才能保持树形结构的完整性，也就是说无论怎么排序，它都是一棵完整的树形结构，并且父子关系不能发生变化，“北京市→顺义区→木林镇→荣各庄村”整条路径都要向上移动。
这就是树形结构的排序，不是按照节点编号或节点名称排序，而是按照节点的选择次数排序。排序之后不能破坏原有的父子关系，要保持树的完整性。这个『排序』也可以叫做『按选择次数排序』。
排序功能先介绍到这儿，后面会详细介绍实现方法。
3、恢复默认
当操作员点击『排序』按钮后，下拉树按照节点选择次数排序，如果要恢复成默认排序方式，也就是按节点编号排序或节点名称排序，那么，点击一下『恢复默认』按钮，就可以恢复成原来的默认排序方式。
当操作员点击『搜索』按钮后，下拉树显示出筛选后的树形结构数据，如果要恢复成全部树形结构数据，那么，点击一下『恢复默认』按钮，就可以恢复成原来的数据了。
这就是『恢复默认』功能，后面会详细介绍实现方法。
二、概要设计
要实现 『搜索』和 『按选择次数排序』，需要将JavaScript树形控件和后台Java程序结合起来，同时还需要使用一种数据格式：JSON嵌套格式（也叫做树形结构JSON），这种数据格式在Ext的树形控件 和 zTree中都有使用。
如图：
图9
这里所用的JavaScript树形控件需要支持JSON嵌套格式，便于客户端编程处理，因为JSON格式很容易转换成JavaScript对象，我猜测JavaScript树形控件也是利用JSON的这个优势，通过先序遍历JavaScript树状对象，在Html页面上打印出树形视图。『搜索』 和 『按选择次数排序』都是建立在这个JavaScript树状对象之上的。
这个树状的JavaScript对象是由JSON嵌套格式转换而来的，其实一个 eval() 方法就可以把JSON格式的数据转换成JavaScript树状对象。
JavaScript树形控件的工作原理，如下：
图10
『搜索』 和 『按选择次数排序』都需要在JavaScript树形控件上做文章。如图所示：
图11
我做了一个带有『搜索』 和 『按选择次数排序』功能的树形菜单Demo演示程序，先看一下图例：
图12
这是一个展示北京郊区村镇的树形结构视图，一共四级节点：市、区、镇、村。在这个树形视图上面增加了两个功能：『按选择次数排序』和『搜索』，还有一个按钮叫『恢复默认』。
下面对该Demo做一下演示：
1、搜索
先在输入框中输入“荣各庄”三个字，点击『搜索』按钮，
图13
图14
“荣各庄村”被搜索出来了，其它的菜单节点都被隐藏了，只筛选出被搜索的节点。用户很容易就找到“荣各庄村”这个节点了，很方便吧。
再试一次，输入“杨镇”二字，点击『搜索』按钮，
图15
杨镇和它下面的三个村子都被搜索出来，也就是说，如果搜索的节点下面有孩子节点，那么该节点和它的孩子节点都被搜索出来，方便用户选择。
2、按选择次数排序
这个功能可以把选择次数高的节点排在前面，选择次数少的节点排在后面，方便用户选择以前曾经选过的频度高的节点。
先点击三次“荣各庄村”这个节点，
图16
再点击一次“二郎庙村”这个节点，
图17
点击『按选择次数排序』按钮，结果如下：
图18
“荣各庄村”和“二郎庙村”都排在了前面，它们的父节点也都排在了前面，也就是说，节点的排序是整条路径排序，例如“北京市→顺义区→木林镇→荣各庄村”就是一条完整路径，这条路径整体都移动到了最前面，杨镇排在了第二位，“二郎庙村”在杨镇下面的三个村中排在了第一位，原来它是第三位。
『按选择次数排序』和普通的『按节点编号排序』或『按节点名称排序』是不一样的，它的排序规则是有逻辑性的。『按选择次数排序』也可以叫做“路径权值”排序，它采用“兄弟节点横向排序”方法来实现，后面会详细介绍这些概念。
3、 恢复默认
这个功能很简单，就是恢复成树形菜单的初始状态。
图19
通过『按选择次数排序』和『搜索』这两个功能，用户可以方便的对树形视图进行筛选和排序，『按选择次数排序』是一种智能化的功能，系统自动计算出选择次数高的节点，将它们由高到低排列，它建立在一种合理的推论之上：用户以前频繁选择的节点，这次可能还要选择它们，至少选择它们的概率比较大。『搜索』功能也是很实用的，在实际的应用系统中，树形控件的数据量很大，有的多达数百个节点或上千个节点，用户可能只记得某个节点大概的名字，具体名字记不住，要想找到它们，只要在搜索框中输入关键字，就可以筛选出包含该关键字的节点了，缩小了选择范围，更加方便用户。
三、详细设计
那么如何具体实现这些功能呢，下面介绍具体的实现原理。
在概要设计中，已经画了很多图了，尤其是图10和图11，画出了树形控件的工作原理，但还不够详细，现在我详细介绍『按选择次数排序』和『搜索』这两个功能的实现方法。下面是zTree的树形控件Demo演示程序，是我从http://www.ztree.me/v3/demo.php#_101 这个网站上下载的，那是zTree V3.5版本的介绍网站，网站截图如下：
图20
如上图中，点击界面右上角的『下载zTree v3.5.12』链接，把Demo演示程序下载下来。
在Demo中有一个文件，完整路径名称是：
JQuery zTree v3.5.12\demo\cn\core\standardData.html，它演示的是如何展现出树形结构。
这个文件的源代码如下：
standardData.html
- >
- <HTML>
- <HEAD>
- <TITLE> ZTREE DEMO - Standard Data TITLE>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
- <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
- <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js">script>
- <script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js">script>
- <SCRIPT type="text/javascript">