第47周星期五EXTJS组织树搜索

今天想解决产品中的一个问题:就是EXTJS资源树在搜索时树展开到搜索结果一级，但考虑到搜索时模糊，一种最坏的极端情况是大部分结点都满足模糊搜索条件都需要展开而导致要加载所有结点，在组织资源树很多时候加载会很慢，所以之前在做的时候即使是搜索也只是加载到到满足结果的第一级树结点，自我感觉这种方案很不好，但如果按放案一，搜索结果数量很大时会很卡，如果是一次加载一个的话再统计时会不方便，这是种矛盾。实现方案还是跟现场用户最常用的功能是搜索定位还是搜索结果过滤有关。如果是搜索定位为主就应该以方案一实现，一次定位一个结点，可以选择上一个、下一个；如果主要是为了过滤结果可以考虑用方案二。

一种可能的改进：搜索时定位一个之后可以把其它的搜索结果也同时显示出来，用户单击一个结果定位展开对应的结点。另一种是搜索时模糊提示，类似百度提示一样的效果。下面摘录一些网上看到的ExtjS树异步加载数据和搜索定位的问题。

TreePanel基本配置参数:

//TreePanel配置参数
1.animate:true//展开,收缩动画,false时,则没有动画效果
2.autoHeight:true//自动高度,默认为false
3.enableDrag:true//树的节点可以拖动Drag(效果上是),注意不是Draggable
4.enableDD:true//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)
5.enableDrop:true//仅仅drop
6.lines:true//节点间的虚线条
7.loader:Ext.tree.TreeLoader//加载节点数据
8.root:Ext.tree.TreeNode//根节点
9.rootVisible:false//false不显示根节点,默认为true
10.trackMouseOver:false//false则mouseover无效果
11.useArrows:true//小箭头

用TreeLoader加载数据生成树

在动态异步加载的Tree树中，客户端实现搜索定位的功能就有点困难，因为节点是异步动态加载的。默认是没有全部从服务器端取回 的，通常的做法是默认加载第一级，其他级的节点都是惰性按需加载的，用户点了才会展开。而对于这个没有完全加载的树，用户希望搜索节点，怎么实现？笨办法是先展开树的所有节点，然后再在树中搜索。这样的话在服务器数据量大的情况下会非常慢。所以在数据量大的情况下，是不采取这种实现方式的，这里的实现方法是在服务器端的Servlet中查找，通过AJAX返回第一个匹配节点的路径Path，然后展开这个路径，选中这个搜索到节点。

通过AJAX返回第一个匹配节点的路径Path，然后展开这个路径，选中这个搜索到节点

要实现此功能需解决三个问题：

1. 通过Ajax将节点id或text传回服务器。

2. 在服务器端查找到节点path，path由节点id号和"/"构成。注意path的格式，如：'/0/4/7'。此处0表示根节点id，7表示被查找的节点id。

3. 将path传回客服端，Extjs将通过Ext.tree.TreePanel的expandPath方法展开节点。

在ExtJS中，AsyncTreeNode是异步节点，TreeLoader实现对树结点的异步加载，即使服务器取到大量的数据，也没有问题，异步加载能保证性能和节点的按需加载。服务端需要生成指定格式的Json字符串。