Jquery easyui 异步树

女爷i 2021-12-19 15:51 195阅读 0赞

[Jquery easyui 异步树][Jquery easyui]

html

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 <html>
     2 <head>
     3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     4 <title>testtreeo</title>
     5     <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
     6     <link rel="stylesheet" type="text/css" href="themes/icon.css">
     7     <link rel="stylesheet" type="text/css" href="demo.css">
     8     <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
     9     <script type="text/javascript" src="jquery.easyui.min.js"></script>
    10     <script type="text/javascript">
    11 var nodekeep="";
    12       $(function(){
             
    13           $('#tt').tree({
             //json.php
    14               checkbox:true,
    15               url:'json.php?id=1',
    16                  onDblClick:function(node,param)
    17                 {
             
    18 //$('#tt').tree('options').url = "json.php?id=1";
    19 //param.myattr = 'test';    // or change request parameter
    20 //alert(node.id);
    21 var nd = node.id;
    22 if( nd != -1)
    23                     {$.ajax({  
    24                              type: "POST",
    25                              url: "json.php?id=" + node.id,
    26                              cache: false,
    27                              async: false,
    28                              dataType: "json",
    29                              success: function(data) 
    30                              {
             //alert(data);
    31 if(nodekeep.indexOf(node.id)==-1)
    32                                 {
             
    33                                   append(data, node);
    34                                   nodeExp = true;
    35                                 }
    36                              }
    37                             });
    38                     }
    39                 },
    40                 onClick:function(node){
             
    41                     $(this).tree('toggle', node.target);
    42 //alert('点击'+node.attributes);
    43                 }
    44           });
    45           
    46  
    47      });
    48 function appends(){
             
    49 var node = $('#tt').tree('getSelected');
    50             $('#tt').tree('append',{
             
    51                 parent: (node?node.target:null),
    52                  data:[{
             
    53                         text:'new1',
    54                         checked:true
    55                        },{
             
    56                         text:'new2',
    57                         state:'closed',
    58                         children:[{
             
    59                                    text:'subnew1'
    60                                     },{
             
    61                                    text:'subnew2'
    62                                  }]
    63                       }]
    64             });
    65         }
    66         
    67 function append(datas,cnode) 
    68     {
             
    69 var node = cnode;
    70      $('#tt').tree('append', {
             
    71          parent: node.target,
    72           data: datas
    73       });
    74       nodekeep+=","+node.id;
    75     }
    76         
    77 </script>
    78 </head>
    79 <body>
    80 <a href="#" onclick="appends()">append</a>
    81     <h2>Tree</h2>
    82     <ul id="tt" >  </ul> 
    83  
    84 </body>
    85 </html>

PHP

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<?PHP
    
    $id = $_GET["id"];
    $ta = "";
    
    if ($id==2){
            
    $ta = "[{\"id\":3,\"text\":\"test\",\"children\":[{\"id\":2,\"text\":\"Fruits1\",\"children\":[{\"id\":4,\"text\":\"File1\",\"attributes\":{\"p1\":\"value1\",\"p2\":\"value2\"} }]  }]}]";
    echo $ta;
    }elseif($id==1){
            
    $ta = "[{\"id\":3,\"text\":\"test\"}]";
    echo $ta;
    }elseif($id==3){
            
    $ta = "[{\"id\":4,\"text\":\"test1\"},{\"id\":5,\"text\":\"test2\"},{\"id\":6,\"text\":\"test3\"},{\"id\":7,\"text\":\"test4\"},{\"id\":8,\"text\":\"test5\"}]";
    echo $ta;
    }elseif($id==4){
            
    $ta = "[{\"id\":-1,\"text\":\"test\"}]";
    echo $ta;
    }elseif($id==5){
            
    $ta = "[{\"id\":-1,\"text\":\"test\"}]";
    echo $ta;
    
    }elseif($id==6){
            
    $ta = "[{\"id\":-1,\"text\":\"test\"}]";
    echo $ta;
    }elseif($id==7){
            
    $ta = "[{\"id\":-1,\"text\":\"test\"}]";
    echo $ta;
    }elseif($id==8){
            
    $ta = "[{\"id\":-1,\"text\":\"test\"}]";
    echo $ta;
    }//else{
             
    //$ta = "[{\"id\":14,\"text\":\"test\"}]";
    //echo $ta;
    //}
    
    
    
    ?>

posted on 2012-04-03 19:29 [流沙-][-] 阅读( ...) 评论( ...) [编辑][Link 1] 收藏

转载于:https://www.cnblogs.com/darkdance/archive/2012/04/03/2431199.html

[Jquery easyui]: https://www.cnblogs.com/darkdance/archive/2012/04/03/2431199.html
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211219/f7d3af20120b4288955450d61866717f.png
[-]: https://www.cnblogs.com/darkdance/
[Link 1]: https://i.cnblogs.com/EditPosts.aspx?postid=2431199