使用Jquery动态加载树并且排序，根节点定死为（XXX监控），三个父节点。
数据库中一个字段（system）标识。
这个字段的值为100的时候第一个父节点的显示值为"Win"然后把这行值所对应的IP显示在"Win"节点下面。
这个字段的值为200的时候第二个父节点的显示值为"Lin"然后把这行值所对应的IP显示在"Lin"节点下面。
这个字段的值为NULL的时候第三个父节点的显示值为"未监测"，然后把这行值所对应的IP显示在未检测节点下面
数据库结构图。效果图
麻烦大家帮帮忙！jquery数据库asp.net
数据库中一个字段（system）标识。
这个字段的值为100的时候第一个父节点的显示值为"Win"然后把这行值所对应的IP显示在"Win"节点下面。
这个字段的值为200的时候第二个父节点的显示值为"Lin"然后把这行值所对应的IP显示在"Lin"节点下面。
这个字段的值为NULL的时候第三个父节点的显示值为"未监测"，然后把这行值所对应的IP显示在未检测节点下面
数据库结构图。效果图
麻烦大家帮帮忙！jquery数据库asp.net
.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();
}
});
});使用方法：
1.先引入js和样式表到头部，记得jq加上<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>
添加js代码：<script type="text/javascript">
$(function () {
//folder tree
$(".st_tree").SimpleTree({
click: function (a) {
var id = $(a).attr("ref")
alert(id);
}
});
})
</script>
链接里面有很多DEMO