在很多系统中都有树形结构的设计，比如部门、分类，在Web系统中需要把整棵形象的显示出来，自己写代码实现是可以做到的，但是会很耗时间，大大的降低了工作的效率，在工作上需要用到这样的功能，所以上网找了下资料，发现jquery的Treeview挺好的，觉得把它用在项目中，在这里把它累积下来作为自己的东西，同时共享给广大的程序猿同胞。
网页代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>树形结构</title>
<script src="jquery-1.8.2.js" type="text/javascript"></script>
<link href="jquery.treeview/jquery.treeview.css" rel="stylesheet" type="text/css" />
<script src="jquery.treeview/jquery.treeview.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
/*这里要先引用jquery类库*/
$(function () {
$("#rootNode").treeview({ collapsed: true });
var objRoot = $("#rootNode").children("li");
objRoot.children("span").click();
var objClassList = objRoot.children("ul").children("li");
/*打开第一个节点*/
if (objClassList.length > 0) {
objClassList.eq(0).children("span").click();
}
});
</script>
</head>
<body>
<ul id="rootNode" class="filetree" style="margin: 0;padding: 0;">
<li><span class="folder">所有权登记</span>
<ul>
<li><span class="folder">初始登记</span>
<ul>
<li class="mfile" ondblclick="#"><span class="leaf">商品房</span> </li>
<li class="mfile" ondblclick="#"><span class="leaf">商品房</span> </li>
</ul>
</li>
<li><span class="folder">转移登记</span>
<ul>
<li class="mfile" ondblclick="#"> <span class="leaf">设立登记</span> </li>
<li class="mfile" ondblclick="#"> <span class="leaf">设立登记</span> </li>
<li class="mfile" ondblclick="#"> <span class="leaf">设立登记</span> </li>
<li class="mfile" ondblclick="#"> <span class="leaf">设立登记</span> </li>
</ul>
</li>
<li><span class="folder">变更登记</span>
<ul>
<li class="mfile" ondblclick="#"><span class="leaf">商品房</span> </li>
<li class="mfile" ondblclick="#"><span class="leaf">商品房</span> </li>
</ul>
</li>
</ul>
</li>
<li><span class="folder">抵押权登记</span>
<ul>
<li><span class="folder">一般抵押权登记</span>
<ul>
<li class="mfile" ondblclick="#"> <span class="leaf">设立登记</span> </li>
<li class="mfile" ondblclick="#"> <span class="leaf">设立登记</span> </li>
<li class="mfile" ondblclick="#"> <span class="leaf">设立登记</span> </li>
<li class="mfile" ondblclick="#"> <span class="leaf">设立登记</span> </li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
截图如下：
