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

最新推荐文章于 2019-10-13 14:47:22 发布

jack20209

最新推荐文章于 2019-10-13 14:47:22 发布

阅读量4.6k

点赞数

文章标签： insert function date class callback url

本文链接：https://blog.csdn.net/xwy3036580/article/details/4537902

版权

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

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

action:

        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();
  }

}

jsp:

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="关闭" οnclick="winExit()"/></div>
--%></form>
</body>

jquery.simple.tree

将ajax替换

$.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);
       }
      }
     });

数据库表

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;

jack20209

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
14
评论
jquery.simple.tree 支持无限级分类，异步加载数据

好久没用S2SH做东西了，闲来没事做了一个jQuery Tree 的Demo 支持无限级分类，异步加载数据，通过这个小程序可以了解一下jQuery动态加载数据的技巧，顺便复习了一下S2SH(struts2+spring+hibername)。这个有demo的，有人需要，可以加我qq，或者留下你的qq，我会发给你。 action: public voi
复制链接

扫一扫