Jquery的插件jquery.lightTreeview-1.0.0-CSDN博客

本文链接：https://blog.csdn.net/sdjnsyy/article/details/5527016

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>

<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">

</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>