异步加载数据的 js tree (基于Jquery)

　　在网页中经常要用到显示拥有层级关系的数据，比如信息发布网站的栏目菜单、某单位的组织结构等等。对于这类数据一般采用树形结构来显示，这样结构清晰明了，操作方便。在asp.net中有TreeView的组件，它的功能已经比较强大。但往往针对不同的项目的时候，他的扩展性，维护性个人感觉不太好。所以在自己写了一个基于jquery 的树js组件，事实完全可以抛离jquery用javascript就行，自己还是懒了点。



　　这个组件只能以异步的方式加载数据，自己没有写同步的。感觉同步加载数据的用处不是很大，不如一步到位直接写成异部的。组件是没有层级限制的。浏览器的兼容性自己只在IE10和Chrome 23中进行了测试，这里只想与大家分享设计的思路，至于真正的实用性，我自己的代码能力有限，其实不能得到什么很广泛的应用。

　　基本的HTML代码如下：

<div class="div_item" spath="1.1">
<ul id="b7b16a42-060d-4395-b7db-6cc1434513e3" class="ul_item">
<li class="ltr_expanded"></li>
<li class="lim_expanded"></li>
<li class="lte">黑龙江省</li>
</ul>
</div>

　　这是tree中的一个单元，用ul元素 显示了该单元中整行的结构内容。如果添加子节点，只需要在<div class="div_item" spath="1.1">元素后面追加一个DIV元素即可，控制好DIV的左侧距离既可以清晰的显示属性结构。代码整体很简单，没什么好说的，直接贴出供大家参考：

treeSJ01.js

/*!
* 基于Jquery 的Tree插件
* 只可以异步加载数据
* 三角号箭头展开图标
* Author:Jann
* Date: 2012-11-15
*/
$.fn.Tree = function (settings) {
var dfop = {
method: "POST",
datatype: "JSON",
url: "",
paramValue: "",
redirectListUrl: "",
redirectEditUrlB: ""
}
$.extend(dfop, settings);
var me = $(this);
var id = me.attr("id");
if (id == null || id == "") {
id = "bbtree" + new Date().getTime();
me.attr("id", id);
}
buildTreeNode(me, 1, dfop.paramValue);
function buildTreeNode(objDiv, spath, parentID) {
objDiv.after("<div id='tree_div_wait'></div>");
asyncLoadNodeData(parentID, function (result) {
if (result.length > 0) {
nodeBuild(objDiv, result, spath);
}
});
}
function nodeBuild(objectDiv, nodes, spath) {
var html = [];
var nodeLen = 0;
if (spath != 1) {
nodeLen = spath.split('.').length - 1;
}
html.push("<div style='clear:both;margin-left: 20px;'>");
for (var i = 0; i < nodes.length; i++) {
if (i == nodes.length - 1) {
slast = 1;
}
html.push("<div class='div_item' spath='" + spath + "." + (i + 1) + "'>");
html.push("<ul id='" + nodes[i].TreeID + "' class='ul_item'>");
if (nodes[i].HasChild == 1) {
html.push("<li class='ltr_collapsed'></li>");
}
else {
html.push("<li class='ltr_none'></li>");
}
html.push("<li class='lim_collapsed'></li>");
html.push("<li class='lte'>" + nodes[i].Name + "</li>");
html.push("</ul>");
html.push("</div>");
}
html.push("</div>");
$("#tree_div_wait").remove();
objectDiv.after(html.join(""));
for (var j = 0; j < nodes.length; j++) {
$("div[spath='" + spath + "." + (j + 1) + "'] li:first:not([class='ltr_none'])")
.mouseenter(triangleME)
.mouseleave(triangleML)
.click(nodeClick);
}
}
function asyncLoadNodeData(parentID, callback) {
var _data = { parentid: parentID };
$.ajax({
type: dfop.method,
url: dfop.url,
data: _data,
dataType: dfop.datatype,
success: callback,
error: function (e) {
alert("load data error!");
}
});
}
function nodeClick(e) {
var itemContainer = $(this).parent().parent();
var spath = itemContainer.attr("spath");
var targetLI = e.target || e.srcElement;
switch (targetLI.className) {
case "ltr_collapsed_B":
$(this).removeClass("ltr_collapsed_B").addClass("ltr_expanded_B");
if ($("div[spath='" + spath + ".1']").length == 0) {
buildTreeNode(itemContainer, spath, $(this).parent().attr("id"));
}
else {
$("div[spath='" + spath + ".1']").parent().css("display", "block");
}
$(this).next().removeClass("lim_collapsed").addClass("lim_expanded");
break;
case "ltr_expanded_B":
$(this).removeClass("ltr_expanded_B").addClass("ltr_collapsed_B");
$("div[spath='" + spath + ".1']").parent().css("display", "none");
$(this).next().removeClass("lim_expanded").addClass("lim_collapsed");
break;
}
}
function triangleME() {
var className = $(this).attr("class");
var newClassName = className + "_B";
$(this).removeClass(className).addClass(newClassName);
}
function triangleML() {
var className = $(this).attr("class");
var newClassName = className.replace('_B', '');
$(this).removeClass(className).addClass(newClassName);
}
}

TreeSJ.css

body { font-size: 12px; }
.ul_item { clear: both; margin: 0px; padding: 0px; }
.ul_item li { list-style-type: none; float: left; height: 22px; display: block; line-height: 22px; background-position: center center; background-repeat: no-repeat;}
.ul_item li.ltr_collapsed { width: 20px; background-image: url('images/itemCollapsedIcon.png'); }
.ul_item li.ltr_collapsed_B { width: 20px; background-image: url('images/itemCollapsedIconB.png'); }
.ul_item li.ltr_expanded { width: 20px; background-image: url('images/itemExpandedIcon.png'); }
.ul_item li.ltr_expanded_B { width: 20px; background-image: url('images/itemExpandedIconB.png'); }
.ul_item li.ltr_none { width: 20px; background-image: url(''); }
.ul_item li.lim_collapsed { width: 20px; background-image: url('images/ext_n.png'); }
.ul_item li.lim_expanded { width: 20px; background-image: url('images/ext_y.png'); }
.ul_item li.lte { line-height: 25px; }
.div_item { float: left; clear: both; }
#tree_div_wait
{
height: 22px;
float: left;
clear: both;
width: 22px;
background-position: center center;
background-image: url('images/tree-wait.gif');
background-repeat: no-repeat;
margin-left:20px;
}

前台调用：

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>TreePage</title>
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/tree/treeSJ01.js"></script>
<link href="~/Content/TreeSJ.css" rel="stylesheet" />
<script>
$().ready(function () {
$("#treediv").Tree({
'url': '@Url.Action("GetData")',
'paramValue':'00000000-0000-0000-0000-000000000000'
});
});
</script>

</head>
<body>
<div id="treediv">
</div>
</body>
</html>

json 数据结构

public class Tree
{
public Guid TreeID { set; get; }
public string Name { set; get; }
public Guid ParentID { set; get; }
public string Url { set; get; }
public int HasChild { set; get; }
}

总结：自己以前写了一个带网格线、加好图标的Tree但是代码很罗嗦，所以又写了一个三角号标的。代码中有一个地方大家需要注意，就是在读取数据的时候用数据参数，自己写死为parentid，这样如果是不同的参数，就需要将treeSJ01.js文件中的参数名手动更改，我自己还没有找到很好的解决方法。