Jquery easyui 异步树

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_34357928

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量59

点赞数

CC 4.0 BY-SA版权

文章标签： javascript php json ViewUI

原文链接：http://www.cnblogs.com/darkdance/archive/2012/04/03/2431199.html

本文介绍了一个使用JQuery EasyUI实现的异步加载树形菜单组件的示例。通过双击节点触发AJAX请求获取子节点数据，并实现了树节点的展开和折叠功能。

Jquery easyui 异步树

html

View Code

 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

View Code

<?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;
//}



?>