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

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

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

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

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

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

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

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

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

var tree = new Ext.tree.TreePanel({
  
… // 此处省略
  
loader:new Ext.tree.TreeLoader({
dataUrl:"myTreeNodesJson.ashx", //服务器端WebService
listeners:{
"loadexception":function(loader,node,response){
node.loaded = false;
//node.reload.defer(10,node);//不停的加载，直到true
}
}
}),
  
… // 此处省略
  
})
  
//根节点
var root=new Ext.tree.AsyncTreeNode({
id:"root",
text:"根节点",
  
qtip:'根节点提示',
  
draggable:false,
expanded:true
});
tree.setRootNode(root);
tree.render();
  
tree.root.expand(false, false); //默认展开第一级 
//tree.on("click", treeClickHandler);

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

using System;
using System.Web;
using System.Collections.Generic;
using System.Web.Script.Serialization;
  
  
  
//定义jsondata类，存放节点数据
  
public class jsondata 
{
public string id;
public string text;
public bool leaf;
public List<jsondata> children=new List<jsondata>();//存放子节点
}
  
  
public class myTreeNodesJson: IHttpHandler {
public List<jsondata> jsdata=new List<jsondata>();
public void ProcessRequest (HttpContext context) {
for (int i = 1; i < 5; i++)
{
jsondata jd = new jsondata();
jd.id="num"+i;
jd.text = "节点"+i;
jd.leaf = false;
for (int j = 1; j < 3; j++)
{
jsondata subjd = new jsondata();
subjd.id = "sub" + j;
subjd.text = "子节点" + j;
subjd.leaf = true;
jd.children.Add(subjd);
} 
jsdata.Add(jd);
} 
context.Response.Write(ToJson(jsdata.ToArray()));//ToArray()在IE里面好像缺了不行
}
public bool IsReusable {
get {
return false;
}
}
  
  
  
//序列化对象为json数据
  
public string ToJson(object o)
{
//序列化对象为json数据
JavaScriptSerializer j = new JavaScriptSerializer();
return j.Serialize(o);
}
  

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

客户端代码：

var lastSearch;
  
function onNodeSearchClick(btn){
var vlu = textBoxNodeSearch.getValue();
if(vlu=='') return;
var startNodeID = null; //New search 新的查找
if(lastSearch != '' && lastSearch == vlu) // Find next 查找下一个
{
if(selectedNodeID && selectedNodeID != 'root')
startNodeID = selectedNodeID ;
}
lastSearch = vlu;
  
//调用服务端Webservice查找
MyServerWebService.SearchNode(vlu, startNodeID , onSearchSuccessCallback, onSearchFailCallback);
  
}
  
function onSearchSuccessCallback(result){
if(result=='') 
alert( "没有找到任何节点!");
else
{
  
//展开路径，注意Path是以节点id加上/来间隔的。
tree.expandPath('tree/root/' + result, 'id', onExpandPathComplete);
}
}
  
function onExpandPathComplete(bSuccess, oLastNode) {
if(!bSuccess) return;
//focus 节点，并选中节点！
selectNode(oLastNode);
}
  
  
function selectNode(node){
if(node)
{
  
　　　　//focus 节点，并选中节点！以下3行代码缺一不可！！
node.ensureVisible();
node.select() ;
node.fireEvent('click', node);
}
}
  
  
  
服务端WebService代码略…

服务器端代码略…

用户体验这点事儿

posted on 2009-04-25 17:23 Mainz 阅读(5428) 评论(10) 编辑收藏举报

刷新页面返回顶部

{var x NullPointerException}

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

导航

公告