登录
当前位置： 首页 > 工具软件 > jQuery Simple Tree > 使用案例 >

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

陈知
2023-12-01

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

转载于:https://www.cnblogs.com/newstar0101/archive/2010/04/14/1711889.html

 类似资料：

相关阅读

Javascript vue.js表格分页，ajax异步加载数据不支持的major.minor版本51.0（无法加载类org.postgresql.Driver）异步加载脚本PHP实现递归无限级分类jQuery Ajax 加载数据时异步显示加载动画

相关文章

Go语言类型分支JVM类的加载机制和加载器Pycharm Javascript支持JasperReports Unicode支持技术支持

相关问答

topicJmsListenerContainerFactory是否支持异步处理-Azure Spring JMS？IntelliJ IDEA中的多模块分级支持？XMLHttpRequest无法加载文件。跨源请求仅支持HTTP快速加载多级类别仅支持有限数量的语言

相关文档

Rust 中的异步编程Twisted 与异步编程入门你不懂JS: 异步与性能Porter 数据同步中间件PHP 异步编程：手把手教你实现 co 与 Koa
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.