ExtJS+ASP.NET实现异步Tree的节点搜索和查找下一个(FindNext)

摘要：在任何一个Tree树中，提供查找功能无疑会大大方便用户。不用睁大眼睛一级一级去展开，只要输入关键字，回车就能自动定位到节点，岂不快哉？然后再次回车查找下一个。这样的用户体验是相当完美的 ( 见《用户体验这点事儿》)。但在动态异步加载的Tree树中，客户端实现这样的功能就有点困难，因为节点是异步动态加载的。默认是没有全部从服务器端取回的，通常的做法是默认加载第一级，其他级的节点都是惰性按需加载的，用户点了才会展开。而对于这个没有完全加载的树，用户希望搜索节点，怎么实现？笨办法是先展开树的所有节点，然后再在树中搜索。这样的话在服务器数据量大的情况下会非常慢。这里的实现方法是在服务器端的WebService查找，通过AJAX返回第一个匹配节点的路径Path，然后展开这个路径，选中这个搜索到节点。查找下一个（FindNext）的实现方法是…

(提供查找功能的树Tree无疑会大大方便用户)

在任何一个Tree树中，提供查找功能无疑会大大方便用户。不用睁大眼睛一级一级去展开，只要输入关键字，回车就能自动定位到节点，岂不快哉？然后再次回车查找下一个。这样的用户体验是相当完美的。

但在动态异步加载的Tree树中，客户端实现这样的功能就有点困难，因为节点是异步动态加载的。默认是没有全部从服务器端取回的，通常的做法是默认加载第一级，其他级的节点都是惰性按需加载的，用户点了才会展开。而对于这个没有完全加载的树，用户希望搜索节点，怎么实现？笨办法是先展开树的所有节点，然后再在树中搜索。这样的话在服务器数据量大的情况下会非常慢。

这里的实现方法是在服务器端的WebService查找，通过AJAX返回第一个匹配节点的路径Path，然后展开这个路径，选中这个搜索到节点。

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

下面是显示树Tree并从服务端取到第一级节点的代码：

客户端JavaScript: 指定TreeLoader，加根节点，并默认展开第一级。

 1: var tree = new Ext.tree.TreePanel({

 2:  

 3: … // 此处省略

 4:  

 5: loader:new Ext.tree.TreeLoader({

 6: dataUrl:"myTreeNodesJson.ashx", //服务器端WebService

 7: listeners:{

 8: "loadexception":function(loader,node,response){

 9: node.loaded = false;

 10: //node.reload.defer(10,node);//不停的加载，直到true

 11: }

 12: }

 13: }),

 14:  

 15: … // 此处省略

 16:  

 17: })

 18:  

 19: //根节点

 20: var root=new Ext.tree.AsyncTreeNode({

 21: id:"root",

 22: text:"根节点",

 23:  

 24: qtip:'根节点提示',

 25:  

 26: draggable:false,

 27: expanded:true

 28: });

 29: tree.setRootNode(root);

 30: tree.render();

 31:  

 32: tree.root.expand(false, false); //默认展开第一级 

 33: //tree.on("click", treeClickHandler);

服务端myTreeNodesJson.ashx代码: 供TreeLoader使用，输出Json格式字符串的树节点。

 1: using System;

 2: using System.Web;

 3: using System.Collections.Generic;

 4: using System.Web.Script.Serialization;

 5:  

 6:  

 7:  

 8: //定义jsondata类，存放节点数据

 9:  

 10: public class jsondata 

 11: {

 12: public string id;

 13: public string text;

 14: public bool leaf;

 15: public List<jsondata> children=new List<jsondata>();//存放子节点

 16: }

 17:  

 18:  

 19: public class myTreeNodesJson: IHttpHandler {

 20: public List<jsondata> jsdata=new List<jsondata>();

 21: public void ProcessRequest (HttpContext context) {

 22: for (int i = 1; i < 5; i++)

 23: {

 24: jsondata jd = new jsondata();

 25: jd.id="num"+i;

 26: jd.text = "节点"+i;

 27: jd.leaf = false;

 28: for (int j = 1; j < 3; j++)

 29: {

 30: jsondata subjd = new jsondata();

 31: subjd.id = "sub" + j;

 32: subjd.text = "子节点" + j;

 33: subjd.leaf = true;

 34: jd.children.Add(subjd);

 35: } 

 36: jsdata.Add(jd);

 37: } 

 38: context.Response.Write(ToJson(jsdata.ToArray()));//ToArray()在IE里面好像缺了不行

 39: }

 40: public bool IsReusable {

 41: get {

 42: return false;

 43: }

 44: }

 45:  

 46:  

 47:  

 48: //序列化对象为json数据

 49:  

 50: public string ToJson(object o)

 51: {

 52: //序列化对象为json数据

 53: JavaScriptSerializer j = new JavaScriptSerializer();

 54: return j.Serialize(o);

 55: }

 56:  

查找节点的实现方法是调用服务器端的WebService查找，通过AJAX返回第一个匹配节点的路径Path，然后展开这个路径，选中这个搜索到节点。查找下一个（FindNext）的实现方法是，每一次客户端把上次已经匹配到底节点的id也作为参数传给服务端，服务端自动查找此节点下一个并返回。

客户端代码：

 1: var lastSearch;

 2:  

 3: function onNodeSearchClick(btn){

 4: var vlu = textBoxNodeSearch.getValue();

 5: if(vlu=='') return;

 6: var startNodeID = null; //New search 新的查找

 7: if(lastSearch != '' && lastSearch == vlu) // Find next 查找下一个

 8: {

 9: if(selectedNodeID && selectedNodeID != 'root')

 10: startNodeID = selectedNodeID ;

 11: }

 12: lastSearch = vlu;

 13:  

 14: //调用服务端Webservice查找

 15: MyServerWebService.SearchNode(vlu, startNodeID , onSearchSuccessCallback, onSearchFailCallback);

 16:  

 17: }

 18:  

 19: function onSearchSuccessCallback(result){

 20: if(result=='') 

 21: alert( "没有找到任何节点!");

 22: else

 23: {

 24:  

 25: //展开路径，注意Path是以节点id加上/来间隔的。

 26: tree.expandPath('tree/root/' + result, 'id', onExpandPathComplete);

 27: }

 28: }

 29:  

 30: function onExpandPathComplete(bSuccess, oLastNode) {

 31: if(!bSuccess) return;

 32: //focus 节点，并选中节点！

 33: selectNode(oLastNode);

 34: }

 35:  

 36:  

 37: function selectNode(node){

 38: if(node)

 39: {

 40:  

 41: 　　　　//focus 节点，并选中节点！以下3行代码缺一不可！！

 42: node.ensureVisible();

 43: node.select() ;

 44: node.fireEvent('click', node);

 45: }

 46: }

 47:  

 48:  

 49:  

 50: 服务端WebService代码略…

服务器端代码略…

• ExtJS+ASP.NET实现真实的进度条显示服务器端长时间操作的进度
• ExtJS+ASP.NET实现异步Tree的节点搜索和查找下一个(FindNext)
• ExtJS+ASP.NET实现Tree节点的拖动(DragDrop)
• ExtJS+ASP.NET实现Grid到Tree的拖动(DragDrop)
• ExtJS+ASP.NET实现单文件上传(FileUpload)
• ExtJS之ASP.NET服务器端实现ashx和asmx处理客户端请求
• 使用YUI Compressor和DOS批处理脚本压缩JavaScript和CSS
• 优化JavaScript
• 区分JavaScript中的underfined,null和NaN

• 用户体验这点事儿