newstar0101

导航

jquery.simple.tree 支持无限级分类，异步加载数据

jquery.simple.tree 支持无限级分类，异步加载数据

 

好久没用S2SH做东西了，闲来没事做了一个jQuery Tree  的Demo 支持无限级分类，异步加载数据，通过这个小程序可以了解一下jQuery动态加载数据的技巧，顺便复习了一下S2SH(struts2+spring+hibername)。

这个有demo的，有人需要，可以加我qq，或者留下你的qq，我会发给你。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
 public void getNodes(){
  HttpServletRequest request=ServletActionContext.getRequest();
  HttpServletResponse response=ServletActionContext.getResponse();
  response.setContentType("text/xml;charset=utf-8");
  String id=request.getParameter("id");
  List list=adminAreaService.queryByParentId(Integer.parseInt(id));
  StringBuffer sbf=new StringBuffer();
  AdminArea a=null;
  sbf.append("<List>");
  for(Iterator ite=list.iterator();ite.hasNext();){
   a=(AdminArea)ite.next();
   if(a!=null){
    sbf.append("<AdminArea>");
     sbf.append("<name>").append(a.getName()).append("</name>");
     sbf.append("<id>").append(a.getId()).append("</id>");
     sbf.append("<isleaf>").append(a.getIsleaf()).append("</isleaf>");
    sbf.append("</AdminArea>");
   }
  }
  sbf.append("</List>");
  PrintWriter out;
  try {
   out = response.getWriter();
   out.println(sbf.toString());
   out.flush();
   out.close();
  } catch (IOException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
 
 }
index.jsp
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
<script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/jquery.simple.tree.js"></script>
  <script type="text/javascript">
var simpleTreeCollection;
var name="";
var id="";
$(document).ready(function(){
 
 simpleTreeCollection = $('.simpleTree').simpleTree({
  autoclose: true,
  afterClick:function(node){
   //alert("text-"+$('span:first',node).text()+$('span:first',node).attr("pid"));
   name=('span:first',node).text();
   id=$('span:first',node).attr("pid");
   window.returnValue = name+"|"+id; // return this value to top adjustment page
       window.close();
  },
  afterDblClick:function(node){
   alert("text-"+$('span:first',node).text());
  },
  afterMove:function(destination, source, pos){
   alert("destination-"+destination.attr('id')+" source-"+source.attr('id')+" pos-"+pos);
  },
  afterAjax:function()
  {
   //alert('Loaded');
  },
  animate:true
  //,docToFolderConvert:true
 });
});
function winExit(){
  window.returnValue = name+"|"+id; // return this value to top adjustment page
  window.close();
}
 
</script>
 </head>
 <body>
 <form action="a" target="Index" method="post">
  <div class="contextMenu" id="myMenu1">
   <ul>
    <li id="add">
     <img src="images/folder_add.png" />
     Add child
    </li>
    <li id="reload">
     <img src="images/arrow_refresh.png" />
     Reload
    </li>
    <li id="edit">
     <img src="images/folder_edit.png" />
     Edit
    </li>
    <li id="delete">
     <img src="images/folder_delete.png" />
     Delete
    </li>
   </ul>
  </div>
  <div class="contextMenu" id="myMenu2">
   <ul>
    <li id="edit">
     <img src="images/page_edit.png" />
     Edit
    </li>
    <li id="delete">
     <img src="images/page_delete.png" />
     Delete
    </li>
   </ul>
  </div>
  <ul class="simpleTree">
   <li class="root" id='1'>
    <ul>
     <li id='2'>
      <span>中国</span>
      <ul class="ajax">
       <li id='3'>
        {url:adminAreaAction!getNodes.action?id=-1}
       </li>
      </ul>
     </li>
    </ul>
   </li>
  </ul>
 
  <%--<div align="center"><input type="button" value="关闭" onclick="winExit()"/></div>
 --%></form>
 </body>

jquery.simple.tree

将ajax替换

jquery.simple.tree
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
$.ajax({
      type: "GET",
      url: url,
      contentType:'html',
      cache:false,
      success: function(responce){
       node.removeAttr('class');
       var str="";
       $(responce).find('AdminArea').each(function(index){
           var name=$(this).children("name").text();
           var id=$(this).children("id").text();
           var isleaf=$(this).children("isleaf").text();
           if(jQuery.trim(isleaf)==0){
            str+="<li id='"+parentId+index+"'>";
            str+="<span pid="+id+">"+name+"</span>";
            str+="<ul class='ajax'>";
         str+="<li id='"+parentId+index+index+"'>
               {url:adminAreaAction!getNodes.action?id="+id+"}</li>";
         str+="</ul></li>"; 
        }else{
         str+="<li id='"+parentId+index+"'><span pid="+id+">"+name+"</span></li>";
        }
          });
          //alert(str);
       node.html(str);
       $.extend(node,{url:url});
       TREE.setTreeNodes(node, true);
       if(typeof TREE.option.afterAjax == 'function')
       {
        TREE.option.afterAjax(node);
       }
       if(typeof callback == 'function')
       {
        callback(node);
       }
      }
     });

数据库表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
 CREATE TABLE adminarea
(
  t_id number NOT NULL,
  name  varchar2(100),
  parentId number,
  isleaf  number,
  creator varchar2(100),
  createDate DATE
  );
ALTER TABLE adminarea ADD constraint AA_PK PRIMARY KEY (t_id);
 
 
CREATE sequence adminarea_sequence
minvalue 1
start WITH 1300
increment BY 1
cache 20;
 
 
INSERT INTO ADMINAREA ( T_ID, NAME, PARENTID, CREATOR, CREATEDATE,isleaf) 
VALUES (
100000, 'china', -1, 'administrator',  
TO_Date( '09/08/2009 12:00:00 上午', 'MM/DD/YYYY HH:MI:SS AM'),0);

INSERT INTO ADMINAREA ( T_ID, NAME, PARENTID, CREATOR, CREATEDATE ,isleaf)
 VALUES (
110000, '北京', -1, 'administrator', 
 TO_Date( '09/08/2009 12:00:00 上午', 'MM/DD/YYYY HH:MI:SS AM'),0);

INSERT INTO ADMINAREA ( T_ID, NAME, PARENTID, CREATOR, CREATEDATE ,isleaf) 
VALUES (
110101, '东城区', 110000, 'administrator',  
TO_Date( '09/08/2009 12:00:00 上午', 'MM/DD/YYYY HH:MI:SS AM'),1);

INSERT INTO ADMINAREA ( T_ID, NAME, PARENTID, CREATOR, CREATEDATE ,isleaf)
 VALUES (
110102, '西城区', 110000, 'administrator', 
 TO_Date( '09/08/2009 12:00:00 上午', 'MM/DD/YYYY HH:MI:SS AM'),1);

INSERT INTO ADMINAREA ( T_ID, NAME, PARENTID, CREATOR, CREATEDATE ,isleaf)
 VALUES (
120000, '天津市', -1, 'administrator',
 TO_Date( '09/08/2009 12:00:00 上午', 'MM/DD/YYYY HH:MI:SS AM'),0);


INSERT INTO ADMINAREA ( T_ID, NAME, PARENTID, CREATOR, CREATEDATE ,isleaf) 
VALUES (
120101, '和平区', 120000, 'administrator', 
 TO_Date( '09/08/2009 12:00:00 上午', 'MM/DD/YYYY HH:MI:SS AM'),1);


INSERT INTO ADMINAREA ( T_ID, NAME, PARENTID, CREATOR, CREATEDATE ,isleaf) 
VALUES (
120102, '河东区', 120000, 'administrator',
 TO_Date( '09/08/2009 12:00:00 上午', 'MM/DD/YYYY HH:MI:SS AM'),1);

INSERT INTO ADMINAREA ( T_ID, NAME, PARENTID, CREATOR, CREATEDATE,isleaf ) 
VALUES (
130000, '河北省', -1, 'administrator',
 TO_Date( '09/08/2009 12:00:00 上午', 'MM/DD/YYYY HH:MI:SS AM'),0);

INSERT INTO ADMINAREA ( T_ID, NAME, PARENTID, CREATOR, CREATEDATE ,isleaf) 
VALUES (
130100, '石家庄市', 130000, 'administrator',  
TO_Date( '09/08/2009 12:00:00 上午', 'MM/DD/YYYY HH:MI:SS AM'),1);

INSERT INTO ADMINAREA ( T_ID, NAME, PARENTID, CREATOR, CREATEDATE,isleaf ) 
VALUES (
130121, '井陉县', 130100, 'administrator',  
TO_Date( '09/08/2009 12:00:00 上午', 'MM/DD/YYYY HH:MI:SS AM'),1);

commit;

转自:http://blog.csdn.net/xwy3036580/archive/2009/09/10/4537902.aspx

posted on 2010-04-14 15:53  newstar0101  阅读(1161)  评论(1)  编辑  收藏  举报