zoukankan      html  css  js  c++  java

  • ligerui中的tree的异步动态加载数据库例子

    截图:

    源码:页面右键就在里面，这里我也贴出来

    [html] view plaincopyprint?
     
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml" >  
    3. <head>  
    4.     <title>tree</title>  
    5.     <link href="../lib/ligerUI/skins/aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />          
    6.     <script src="../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>  
    7.     <script src="../lib/ligerUI/js/ligerui.min.js" type="text/javascript"></script>  
    8.       
    9.      <script type="text/javascript">  
    10.         var manager = null;  
    11.         $(function ()  
    12.         {  
    13.             $("#tree1").ligerTree(  
    14.             {  
    15.                 checkbox:false,    
    16.                 nodeWidth : 250,  
    17.                 onSelect: onSelect   
    18.             });  
    19.             manager = $("#tree1").ligerGetTreeManager();  
    20.         });  
    21.           
    22.         function onSelect(note) //这里的异步加载逻辑取决于你的数据库设计，把选中节点的id传回去，传回子节点json然后加载  
    23.         {                      
    24.                 if (note.data.id=="0")    
    25.                 {                     
    26.                    if (note.data.children && note.data.children.length == 0)  
    27.                         manager.loadData(note.target, "/service/DataHandler.ashx?View=expstate");  //加载省和直辖市                
    28.                 }  
    29.                 else  
    30.                 {  
    31.                    if (note.data.children==undefined)  
    32.                    {  
    33.                         if  (note.data.id.toString().substr(2,2)=="00")  
    34.                         {  
    35.                             manager.loadData(note.target, "/service/DataHandler.ashx?View=expcity&stateid="+ note.data.id);  //加载城市  
    36.                         }  
    37.                         else  
    38.                         {  
    39.                             if (note.data.id.toString().substr(4,2)=="00")  
    40.                                 manager.loadData(note.target, "/service/DataHandler.ashx?View=expsubcity&cityid="+ note.data.id);  //加载区县  
    41.                         }                          
    42.                    }  
    43.                 }                  
    44.         }       
    45.        
    46.     </script>          
    47. </head>  
    48.   
    49. <body>      
    50.     <div  style="400px; height:300px;border:solid 1px blue; margin-top:50px; margin-left:50px; overflow:auto">  
    51.     <ul id="tree1" >   
    52.         <li isexpand="false" id="0"><span>我们都有一个家，名字叫中国</span><ul></ul></li>  
    53.     </ul>   
    54.     </div>  
    55.     <div style="display:none">       
    56.     </div>  
    57. </body>  
    58. </html>  


    讲解:

     什么原理，tree的onselect事件里，把当前选中的节点的id传回后台，用loaddata方法把子节点json传回来，加载进去，没了
  • 相关阅读:
    论语心得
    水果总结
    欢乐颂
    大牌驾到
    Excel补全日期（日期按顺序补全）
    c语言define和typedef区别和使用
    c语言寄存器变量
    c语言伪常量const理解
    c语言静态断言-定义自己的静态断言
    c语言静态断言
  • 原文地址：https://www.cnblogs.com/zhaoxd/p/3118799.html
Copyright © 2011-2022 走看看