您的位置：首页 > Web前端 > JQuery

Jquery的插件jquery.lightTreeview-1.0.0

2010-04-25 17:02 225 查看
Jquery的插件是十分强大的，今天我就学习了一个Jquery的插件。它的效果为一颗树：

它的Html代码是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>lightTreeview - jQuery树型菜单插件 download by http://www.codefans.net</title>
<link href="jquery.lightTreeview.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.lightTreeview.pack.js"></script>

<body>
<h2>Demo4</h2>

<ul id="demo4">
<li><div>北京</div></li>
<li>
<div>浙江</div>
<ol>
<li>
<div>杭州</div>
<ul style="display:none">
<li><div>上城区</div></li>
<li><div>下城区</div></li>
<li><div>江干区</div></li>
<li><div>西湖区</div></li>
</ul>
</li>
<li><div>宁波</div></li>
<li><div>绍兴</div></li>
</ol>
</li>
<li>
<div>广东</div>
<ul style="display:none">
<li><div>广州</div></li>
<li><div>湛江</div></li>
<li><div>佛山</div></li>
</ul>
</li>
<li><div>上海</div></li>
</ul>
<script type="text/javascript">
$(function() {

$('#demo4').lightTreeview({
collapse: true,
line: true,
nodeEvent: true,
unique: false,
style: 'gray',
animate: 100,
fileico: true,
folderico: true
});
});
</script>

</body>
</html>

今天，我实现的功能是从数据库当中，读出数据并动态的加载的；它的代码是：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="Web.Capnel.Department.WebForm3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>

<script type="text/javascript" src="../../js/jquery/jquery.js"></script>

<link href="jquery.lightTreeview.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jquery-1.2.6.js"></script>

<script type="text/javascript" src="jquery.lightTreeview.pack.js"></script>

</head>
<body>
<ul id="Deparentment">

</ul>
<script type ="text/javascript" language ="javascript" >
$(document ).ready(function (){

$.ajax({
url: "WebForm4.aspx",
type: "POST",
data:null ,//post参数信息
dataType: "json",
timeout: 1000,
error: function(data){alert("error");},
success: function(data)
{
alert ("你好");
var cell,row;
if(data.rows.length<=0)
return;
alert (data.number/2);
for(var inum=1;inum<data.number/2 +1;inum++)
{
for (var iRow=0;iRow<data.rows.length;iRow++)
{
var DepartmendId=data .rows[iRow].cell[0];
var Superior=data.rows[iRow].cell[5];
var Name=data.rows[iRow].cell[1];
if (DepartmendId.length ==inum *2)
{
switch (DepartmendId.length/2 )
{
case 1:
var $li=$("<li id="+DepartmendId+"><div>"+Name+"</div></li>");
$("#Deparentment").append($li );
break ;
case 2:
var SuperiorId1=$("#"+Superior);
var Children2=SuperiorId1.children();
if (Children2 .length-1!=0)
{
var Child2=$("ol> li:last-child");
Child2.after("<li id="+DepartmendId+"><div>"+Name+"</div></li>");
}
else
{
SuperiorId1.append("<ol><li id="+DepartmendId+"><div>"+Name+"</div></li></ol>");
}
break ;
default :
var SuperiorId2=$("#"+Superior);
var Children3=SuperiorId2.children();
if (Children3.length-1!=0)
{
var Child3=$("#ul"+Superior+"> li:last-child");
Child3 .after("<li id="+DepartmendId+"><div>"+Name+"</div></li>");
}
else
{
SuperiorId2.append("<ul id='ul"+Superior+"'><li id="+DepartmendId+"><div>"+Name+"</div></li></ul>");
}

}//switch

}//if

}//for
}//for
$("#Deparentment").lightTreeview({
collapse: true,
line: true,
nodeEvent: true,
unique: false,
style: 'gray',
animate: 100,
fileico: true,
folderico: true
});

}//successor
});
});
</script>

</body>
</html>
其中服务器的代码在Json对象（2）中的博客中。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航