Jquery动态加载Treeview树！
使用Jquery动态加载树并且排序，根节点定死为（XXX监控），三个父节点。
数据库中一个字段（system）标识。
这个字段的值为100的时候第一个父节点的显示值为"Win"然后把这行值所对应的IP显示在"Win"节点下面。
这个字段的值为200的时候第二个父节点的显示值为"Lin"然后把这行值所对应的IP显示在"Lin"节点下面。
这个字段的值为NULL的时候第三个父节点的显示值为"未监测"，然后把这行值所对应的IP显示在未检测节点下面
数据库结构图。
效果图
麻烦大家帮帮忙！ jquery 数据库 asp.net
[解决办法]
.st_tree{ padding:10px;}
/* 超链接 */
.st_tree a{ text-decoration:none; }
/* 鼠标经过的超链接 */
.st_tree a:hover{ color:#f33; text-decoration:underline;}
/* 菜单 */
.st_tree ul{ padding:0 18px; margin:0; }
/* 菜单项 */
.st_tree ul li{ font-size:13px; color:#222; line-height:18px; cursor:pointer;list-style:none;
background:url(imgs/st_node.gif); background-repeat:no-repeat; padding:0 0 3px 20px;
width:120px;}
/* 子菜单 */
.st_tree ul li ul{}
/* 子菜单项 */
.st_tree ul li ul li{}
/* 子菜单的父节点 */
.st_tree .folder{ list-style-image:url(imgs/st_icon.png); background:url(imgs/st_folder.gif);
background-repeat:no-repeat; padding:0 0 0 20px;}
/* 展开的父节点 */
.st_tree .open{ list-style-image:url(imgs/st_icon_open.png); background:url(imgs/st_folder_open.gif);
background-repeat:no-repeat; padding:0 0 0 20px; }$(function () {
$.fn.extend({
SimpleTree: function (options) {
//参数初始化
var option = $.extend({
click: function (a) { }
}, options);
option.tree = this; /* 在参数对象中添加对当前菜单树的引用，以便在对象中使用该菜单树 */
option._init = function () {
/*
* 初始化菜单展开状态，以及分叉节点的样式
*/
this.tree.find("ul ul").hide(); /* 隐藏所有子级菜单 */
this.tree.find("ul ul").prev("li").removeClass("open"); /* 移除所有子级菜单父节点的 open 样式 */
this.tree.find("ul ul[show='true']").show(); /* 显示 show 属性为 true 的子级菜单 */
this.tree.find("ul ul[show='true']").prev("li").addClass("open"); /* 添加 show 属性为 true 的子级菜单父节点的 open 样式 */
} /* option._init() End */
/* 设置所有超链接不响应单击事件 */
this.find("a").click(function () { $(this).parent("li").click(); return false; });
/* 菜单项 <li> 接受单击 */
this.find("li").click(function () {
/*
* 当单击菜单项 <li>
* 1.触发用户自定义的单击事件，将该 <li> 标签中的第一个超链接做为参数传递过去
* 2.修改当前菜单项所属的子菜单的显示状态（如果等于 true 将其设置为 false，否则将其设置为 true）
* 3.重新初始化菜单
*/
option.click($(this).find("a")[0]); /* 触发单击 */
/*
* 如果当前节点下面包含子菜单，并且其 show 属性的值为 true，则修改其 show 属性为 false
* 否则修改其 show 属性为 true
*/
if ($(this).next("ul").attr("show") == "true") {
$(this).next("ul").attr("show", "false");
} else {
$(this).next("ul").attr("show", "true");
}
/* 初始化菜单 */
option._init();
});
/* 设置所有父节点样式 */
this.find("ul").prev("li").addClass("folder");
/* 设置节点“是否包含子节点”属性 */
this.find("li").find("a").attr("hasChild", false);
this.find("ul").prev("li").find("a").attr("hasChild", true);
/* 初始化菜单 */
option._init();
}
});
});
<div class="st_tree">
<ul>
<li><a href="javascript:void(0);" ref="hyjm" tt="aaaa">欢迎界面</a></li>
<li><a href="javascript:void(0);" ref="xtgl">系统管理</a></li>
<ul>
<li><a href="javascript:void(0);" ref="yhgl">用户管理</a></li>
<li><a href="javascript:void(0);" ref="rzck">日志查看</a></li>
</ul>
<li><a href="javascript:void(0);" ref="ckgl">仓库管理</a></li>
<ul>
<li><a href="javascript:void(0);" ref="kcgl">库存管理</a></li>
<li><a href="javascript:void(0);" ref="shgl">收货管理</a></li>
<li><a href="javascript:void(0);" ref="fhgl">发货管理</a></li>
<ul>
<li><a href="javascript:void(0);" ref="yhgl">用户管理</a></li>
<li><a href="javascript:void(0);" ref="rzck">日志查看</a></li>
</ul>
</ul>
</ul>
</div>
<script type="text/javascript">
$(function () {
//folder tree
$(".st_tree").SimpleTree({
click: function (a) {
var id = $(a).attr("ref")
alert(id);
}
});
})
</script>