打造基于jQuery的高性能TreeView(下)

核心提示： 展开节点，异步请求的部分代码应该不是很复杂就不细诉了，打造基于jQuery的高性能TreeView(下)(5)，关键来讲一下级联级联有两个问题要处理，第一个是遍历子节点，按需加载的情况也是非常常用的，使用的是SQL Azure服务器在美国ing，第二个是上溯到祖节点，因为我们的数据结构这两个操作

展开节点，异步请求的部分代码应该不是很复杂就不细诉了，关键来讲一下级联

级联有两个问题要处理，第一个是遍历子节点，第二个是上溯到祖节点，因为我们的数据结构这两个操作都显得非常简单

01.//遍历子节点
02.function　cascade(fn,　item,　args)　{
03.　　　　if　(fn(item,　args,　1)　!=　false)　{
04.　　　　　　　　if　(item.ChildNodes　!=　null　&&　item.ChildNodes.length　>　0)　{
05.　　　　　　　　　　　　var　cs　=　item.ChildNodes;
06.　　　　　　　　　　　　for　(var　i　=　0,　len　=　cs.length;　i　<　len;　i++)　{
07.　　　　　　　　　　　　　　　　cascade(fn,　cs[i],　args);
08.　　　　　　　　　　　　}
09.　　　　　　　　}
10.　　　　}
11.}
12.//冒泡的祖先
13.function　bubble(fn,　item,　args)　{
14.　　　　var　p　=　item.parent;
15.　　　　while　(p)　{
16.　　　　　　　　if　(fn(p,　args,　0)　===　false)　{
17.　　　　　　　　　　　　break;
18.　　　　　　　　}
19.　　　　　　　　p　=　p.parent;
20.　　　　}
21.}

找到节点的同时都会触发check这个回调函数，来判断当前节点的状态，详细请看下面代码中的注释部分应该是比较清晰，描写了这个过程

01.　　　　function　check(item,　state,　type)　{
02.　　　　var　pstate　=　item.checkstate;　//当前状态
03.　　　　if　(type　==　1)　{
04.　　　　　　　　item.checkstate　=　state;　//如果是遍历子节点，父是什么子就是什么
05.　　　　}
06.　　　　else　{//　上溯　，这个就复杂一些了
07.　　　　　　　　var　cs　=　item.ChildNodes;　//获取当前节点的所有子节点
08.　　　　　　　　var　l　=　cs.length;
09.　　　　　　　　var　ch　=　true;　//是否不是中间状态　半选
10.　　　　　　　　for　(var　i　=　0;　i　<　l;　i++)　{
11.　　　　　　　　　　　　if　((state　==　1　&&　cs[i].checkstate　!=　1)　||　state　==　0　&&　cs[i].checkstate　!=　0)　{
12.　　　　　　　　　　　　　　　　ch　=　false;
13.　　　　　　　　　　　　　　　　break;//他的子节点只要有一个没选中，那么他就是半选
14.　　　　　　　　　　　　}
15.　　　　　　　　}
16.　　　　　　　　if　(ch)　{
17.　　　　　　　　　　　　item.checkstate　=　state;//不是半选，则子节点是什么他就是什么
18.　　　　　　　　}
19.　　　　　　　　else　{
20.　　　　　　　　　　　　item.checkstate　=　2;　//半选
21.　　　　　　　　}
22.　　　　}
23.　　　　//change　show　如果节点已输出，而其前后状态不一样，则变化checkbxo的显示　　　　　　　　
24.　　　　if　(item.render　&&　pstate　!=　item.checkstate)　{
25.　　　　　　　　var　et　=　$("#"　+　id　+　"_"　+　item.id　+　"_cb");
26.　　　　　　　　if　(et.length　==　1)　{
27.　　　　　　　　　　　　et.attr("src",　dfop.cbiconpath　+　dfop.icons[item.checkstate]);
28.　　　　　　　　}
29.　　　　}
30.}

至此我们树的主体功能已经完全实现了。其他就是公开一些方法等，大家可详见代码，示例中公开了两个一个当前选中的所有节点，另外一个当前的节点。

大家可以通过以下网址查看文中的示例，selected拼错了，大家海涵！ windows azure部署还是麻烦懒得修改了3500+节点一次加载，大家可以点击根节点的全选来看看速度

http://jscs.cloudapp.net/ControlsSample/BigTreeSample

异步加载，按需加载的情况也是非常常用的，使用的是SQL Azure服务器在美国ing，所以可能异步有点慢，本地数据源那是瞬间的

http://jscs.cloudapp.net/