Asp.net TreeView动态加载节点（二）(结合Jquery实现节点加载效果)

在节点展开等待时显示一个loading图标.效果如图：


BTW:Juery确实是一个优秀的JS框架.

JS代码：

<script type="text/javascript">

$(document).ready(function() {

$("#tree_view").click(function(e) {

//事件源

var e_src = e.target.src;

//截获展开图标事件

if(typeof (e_src)!= "undefined"){

//加号图标1

var expand1 = "TreeLineImages/dashplus.gif";

//加号图标2

var expand2 = "TreeLineImages/tplus.gif";

//加号图标2

var expand3 = "TreeLineImages/lplus.gif";

//加载图标

var ajax_load = "TreeLineImages/ajax-loader.gif";

//判断是否显示加载图标

if (e_src.indexOf(expand1) != -1 || e_src.indexOf(expand2) != -1 || e_src.indexOf(expand3) != -1) {

//如果已载入数据的节点就不显示ajax载入图标

//alert($("#" + $(e.target).parent().attr("id") + "Nodes").attr("id"));

if (typeof ($("#" + $(e.target).parent().attr("id") + "Nodes").attr("id")) == "undefined") {

$(e.target).css("width", "19px");

$(e.target).css("height", "20px");

e.target.src = ajax_load;

}

}

}

});

});

</script>

说明:
1.对treeview会在节点数据加载完后重置节点前图标,JS只需要截取节点前图标的click事件,并改变节点前图标src;
2.在DOM中新增的元素不好绑定事件,本例通过冒泡事件实现.
3.后面代码可以另入System.Threading.Thread.Sleep(1000);延时处理
4.需要Demo的朋友可以QQ,MSN我,一起交流.QQ:154179812;MSN:ikmb@163.com