使用Jquery，Ajax+Struts+Spring+Ibatis写的一个无限级树，供大家参考一下

先看看jsp页面，tree.jsp,Code如下：

<%@ page contentType="text/html;charset=UTF-8" %><%  String context = request.getContextPath();%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>树状菜单</title>    <link type="text/css" href="<%=context%>/css/tree/tree.css" rel="stylesheet" rev="stylesheet" /> <%@ include file="/common/commonTop.jsp"%>      <script type="text/javascript" src="<%=context%>/script/tree/tree.js"></script>  <script type="text/javascript">      function locationHref(functionID,functionUrl,forwardUrl,functionUrlParam){            if(selectHrefID!=""){              document.getElementById(selectHrefID+"_href").style.background="";          }         selectHrefID = functionID;           document.getElementById(functionID+"_href").style.background="#0CA4CF";         document.getElementById(functionID+"_href").target='mainFrame';         document.getElementById("functionUrl").value=functionUrl;          document.getElementById("functionUrlParam").value=functionUrlParam;            document.getElementById(functionID+"_href").href=forwardUrl+"?functionUrl="+functionUrl+"&functionUrlParam="+functionUrlParam;      } </script>  </head>

  <body leftmargin="10" topmargin="0">    <input type="hidden" id="functionUrl" value="">    <input type="hidden" id="functionUrlParam" value="">   <input type="hidden" name="action" id="action" value="treeQuery">   <input type="hidden" name="url" id="url" value="<%=context%>/admin/treeAction.do">   <table>         <tr>            <td>                <div id="selectStoreType" style="display: none">                      <select id="selectType"></select>              </div>          </td>       </tr>       <tr>            <td>                <div id="selectMsg"></div>         </td>       </tr>       <tr>            <td>                <div id="treemenu" style="width:100%; height:auto;">                      <div id="tree" style="display: none" align="left">                        <img src="<%= context %>/images/ajax-loader.gif">请稍等...                    </div>              </div>          </td>       </tr>   </table>  </body></html>

再就是javascript，tree.js,如下:

var selectTypeID = "";        $(document).ready(function(){         storeTypeAjax();          $("#selectType").change(function(){             $("#tree").html("   <img src=\"<%= context %>/images/ajax-loader.gif\">请稍等...");              selectTypeID = $("#selectType").val();             treeNodeAjax("0","tree",selectTypeID);            });       });

     //用于控制超级链接的背景色        var selectHrefID = "";

       //异步生成树       function treeNodeAjax(functionID,nodeID,storeTypeID){         $("#selectMsg").hide();         $("#"+nodeID).show();          $.ajax({              type: "post",//使用get方法访问后台              dataType: "javascript",//返回文本格式的数据              url: $("#url").val(),//要访问的后台地址             data: "action="+$("#action").val()+"&function_id="+functionID+"&store_type_id="+storeTypeID,//要发送的数据              complete :function(){$(nodeID).show();},//AJAX请求完成时显示提示               error:function(msg){alert('加载错误');},                success: function(msg){//msg为返回的数据，在这里做数据绑定                    if(msg.indexOf("1003")!=-1){                       $("#selectMsg").html("<font color=red>   "+msg+"</font>");                       $("#selectMsg").show();                     $("#"+nodeID).hide();                  }else{                        var msgarray = msg.split("|");                     var htmlNode = "";                     for(var i=0;i<msgarray.length;i++){                         var msgelement = msgarray[i].split(",");                           htmlNode += creatTreeNode(msgelement[0],msgelement[1],msgelement[2],msgelement[3],msgelement[4],msgelement[5],msgelement[6]);                       }                     $("#"+nodeID).html("<div id='"+msgelement[2]+"'><ul style=\"cursor: hand;\">"+htmlNode+"</ul></div>");                 }                 //alert($("#"+nodeID).html());             }         });       }

       //异步生成树       function storeTypeAjax(){         $("#selectMsg").hide();         var selectObj = document.getElementById("selectType");         var options = new Option("请稍等...","");           selectObj.add(options)            $.ajax({              type: "post",//使用get方法访问后台              dataType: "javascript",//返回文本格式的数据              url: $("#url").val(),//要访问的后台地址             data: "action=storeTypeQuery",//要发送的数据             complete :function(){$("#selectStoreType").show();},//AJAX请求完成时显示提示             error:function(msg){alert('加载错误');},                success: function(msg){//msg为返回的数据，在这里做数据绑定                    if(msg.indexOf("1003")!=-1){                       $("#selectMsg").html("<font color=red>   "+msg+"</font>");                       $("#selectMsg").show();                 }else{                        var msgarray = msg.split("|");                     var selectTypeNode = "";                       selectObj.options.length=0;                      for(var i=0;i<msgarray.length;i++){                         var msgelement = msgarray[i].split(",");                           var options = new Option(msgelement[2],msgelement[0]);                           selectObj.add(options);                       }                     selectTypeID = $("#selectType").val();                     treeNodeAjax("0","tree",selectTypeID);                    }             }         });       }

     //生成树的结构      function creatTreeNode(function_id,function_name,parent_id,function_url,count,forward_url,function_url_param){            var htmlWrite = "";            if(count>0){               htmlWrite = "<li class=\"tree\" id='"+function_id+"_li' onclick=creatChildTreeNode('"+function_id+"','"+function_id+"')><a style=\"cursor: hand;\" id='"+function_id+"_href' onclick=\"locationHref('"+function_id+"','"+function_url+"','"+forward_url+"','"+function_url_param+"')\">"+function_name+"</a></li>";            }else{                htmlWrite = "<li><a style=\"cursor: hand;\" id='"+function_id+"_href' onclick=\"locationHref('"+function_id+"','"+function_url+"','"+forward_url+"','"+function_url_param+"')\">"+function_name+"</a></li>";          }         htmlWrite += "<div id='"+function_id+"' style=\"display: none\"><img src=\"<%= context %>/images/ajax-loader.gif\">请稍等...</div>";           return htmlWrite;     }

       //生成子节点，并重新给定onclick事件     function creatChildTreeNode(functionID,nodeID,parentID){          document.getElementById(functionID+"_li").className="notree";           treeNodeAjax(functionID,nodeID,selectTypeID);         document.getElementById(functionID+"_li").onclick=new Function("hideLi('"+functionID+"')");       }

       function hideLi(functionID){          document.getElementById(functionID+"_li").className="tree";         $("#"+functionID).hide();          document.getElementById(functionID+"_li").onclick=new Function("showLi('"+functionID+"')");       }

       function showLi(functionID){          document.getElementById(functionID+"_li").className="notree";           $("#"+functionID).show();          document.getElementById(functionID+"_li").onclick=new Function("hideLi('"+functionID+"')");       }

StrutsAction代码如下，TreeAction.java：

package cn.action.tree;

import java.util.List;import java.util.Map;

import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;

import org.apache.log4j.Logger;import org.apache.struts.action.ActionForm;import org.apache.struts.action.ActionForward;import org.apache.struts.action.ActionMapping;import org.apache.struts.actions.DispatchAction;

import cn.bean.login.LoginBean;import cn.dao.tree.TreeDao;

public class TreeAction extends DispatchAction {

    private TreeDao treeDao;

    public TreeDao getTreeDao() {     return treeDao;   }

   public void setTreeDao(TreeDao treeDao) {     this.treeDao = treeDao;  }

   Logger log = Logger.getLogger(this.getClass());

    //查询树节点   public ActionForward treeQuery(ActionMapping mapping,                                ActionForm form,                              HttpServletRequest request,                               HttpServletResponse response)throws Exception{     HttpSession session = request.getSession();      Object obj = session.getAttribute("userinfomation");       LoginBean loginBean = new LoginBean();       if(obj!=null){           loginBean = (LoginBean)obj;      }     String functionID = request.getParameter("function_id");       String storeTypeID = request.getParameter("store_type_id");        if(storeTypeID==null){          storeTypeID="3";       }     List list = this.treeDao.getTreeList(storeTypeID, functionID, loginBean.getFunction_ids());      StringBuffer mapsb = new StringBuffer();     response.setContentType("text/html;charset=UTF-8");        if(list.size()>0){         for(int i=0;i<list.size();i++){             Map map = (Map)list.get(i);              mapsb.append(map.get("function_id")+","+map.get("function_name")+","+map.get("parent_id")+","+map.get("function_url")+","+map.get("count")+","+map.get("forward_url")+","+map.get("function_url_param"));               if(i!=(list.size()-1)){                  mapsb.append("|");              }         }         response.getWriter().print(mapsb.toString());     }else{            response.getWriter().print("没有对应的信息!ErrorCode:1003");       }     return null;  }

   //查询树节点上方的商店类型    public ActionForward storeTypeQuery(ActionMapping mapping,                                   ActionForm form,                                  HttpServletRequest request,                                   HttpServletResponse response)throws Exception{     HttpSession session = request.getSession();      Object obj = session.getAttribute("userinfomation");       LoginBean loginBean = new LoginBean();       if(obj!=null){           loginBean = (LoginBean)obj;      }     List list = this.treeDao.getTreeStoreType(loginBean.getStore_id());      StringBuffer mapsb = new StringBuffer();     response.setContentType("text/html;charset=UTF-8");        if(list.size()>0){         for(int i=0;i<list.size();i++){             Map map = (Map)list.get(i);              mapsb.append(map.get("store_type_id")+","+map.get("store_type_name")+","+map.get("store_name"));                if(i!=(list.size()-1)){                  mapsb.append("|");              }         }         response.getWriter().print(mapsb.toString());     }else{            response.getWriter().print("没有对应的信息!ErrorCode:1003");       }     return null;  }}

下面是Dao，TreeDao.java:

package cn.dao.tree;

import java.io.IOException;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;

import cn.baseservice.EnterpriseService;

public class TreeDao {

   public EnterpriseService enterpriseService;

 public EnterpriseService getEnterpriseService() {     return enterpriseService; }

   public void setEnterpriseService(EnterpriseService enterpriseService) {       this.enterpriseService = enterpriseService;  }

   public List getTreeList(String store_type_id,String functionID,String function_ids){      Map paramMap = new HashMap();        List function_ids_list = new ArrayList();        paramMap.put("function_id", functionID);        paramMap.put("store_type_id", store_type_id);       String[] function_ids_array = function_ids.split(",");     for(int i=0;i<function_ids_array.length;i++){           function_ids_list.add(function_ids_array[i]);     }     paramMap.put("function_ids", function_ids_list);

      return enterpriseService.getList("Tree.node", paramMap);    }

   public List getTreeStoreType(String stroe_id){        Map paramMap = new HashMap();        paramMap.put("stroe_id", stroe_id);     return enterpriseService.getList("Tree.stroeType", paramMap);   }}

Ibatis,sqlconfig.xml如下:

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE sqlMap PUBLIC "-//ibatis.apache.org//DTD SQL Map 2.0//EN" "http://ibatis.apache.org/dtd/sql-map-2.dtd">  <sqlMap namespace="Tree">  <select id="node" parameterClass="java.util.HashMap" resultClass="java.util.HashMap">    select t.*,(SELECT COUNT(1) FROM tab_function a WHERE a.parent_id = t.function_id    <iterate prepend=" and a.function_id in " property="function_ids" open="(" close=")" conjunction=",">        #function_ids[]#      </iterate>      ) AS count     from tab_function t where 1=1 and t.store_type_id = #store_type_id# and t.parent_id = #function_id#   <iterate prepend=" and t.function_id in " property="function_ids" open="(" close=")" conjunction=",">        #function_ids[]#      </iterate>  </select>

  <select id="stroeType" parameterClass="java.util.HashMap" resultClass="java.util.HashMap">    SELECT a.*, t.* FROM tab_store t INNER JOIN tab_store_type a ON t.store_type_id = a.store_type_id WHERE 1=1     <isNotEmpty prepend=" and " property="store_id">          t.store_id = #store_id#      </isNotEmpty>  </select></sqlMap>

StrutsConfig配置：

<action path="/admin/treeAction" type="org.springframework.web.struts.DelegatingActionProxy" scope="request" parameter="action">     </action>

Spring配置:

.....上面的就不写明了.....<bean id="sqlMapClient" class="org.springframework.orm.ibatis.SqlMapClientFactoryBean">      <property name="configLocation" value="/WEB-INF/config/ibatis-config/sqlmap-config.xml"/>     <property name="dataSource" ref="dataSource"/>    </bean>

   <bean id="enterpriseService" class="cn.baseservice.EnterpriseService">        <property name="sqlMapClient" ref="sqlMapClient"/>    </bean><bean id="treeDao" class="cn.dao.tree.TreeDao">        <property name="enterpriseService" ref="enterpriseService"/>    </bean>

    <bean name="/admin/treeAction" class="cn.action.tree.TreeAction">      <property name="treeDao" ref="treeDao"/>    </bean>

目前树结构没有使用css进行美化，大致的效果图如下:

[img]http://dl.iteye.com/upload/attachment/277681/6e79a824-5b1e-3b3d-b954-a00edfcd4694.bmp[/img]

工程附件及数据结构如下，可用eclipse直接打开:

使用Jquery，Ajax+Struts+Spring+Ibatis写的一个无限级树，供大家参考一下相关推荐

基于struts+spring+ibatis的轻量级J2EE开发
基于struts+spring+ibatis的轻量级J2EE开发内容: 1. 前言 2. JpetStore简述 3. JPetStore的改造 4. 结束语参考资料关于作者对本文的评价订阅 ...
Struts spring ibatis的集成（连载一）---转
关键词: ibatis ibatis集成spring dwr集成spring 内容: 当前软件开发中ssh框架集成司空常见,相信大家都会做.ibatis是一 ...
chosen jquery ajax搜索,基于chosen插件实现人员选择树搜索自动筛选功能
要实现的功能截图: 要求: 1.点击输入框可以根据拼音自动筛选数据,并且标记已经选择的数据,没有结果的时候提示,相应的更新左边树状态 2.勾选树右侧树的复选框左侧出现相应的内容我用到的插件 vue+ ...
ajax用户注册验证视频,jquery+ajax实现注册实时验证实例详解
本文实例讲述了jquery+ajax实现注册实时验证.分享给大家供大家参考,具体如下: 当我们注册一个用户时,会实时提示该用户的信息是否可用,这就是ajax的应用,很久以前就看过这个实现了,今天又看了 ...
ajax modelmap,spring mvc+ajax处理JSON返回前台的方法
在 Spring mvc3中,响应.接受 JSON都十分方便. 使用注解@ResponseBody可以将结果(一个包含字符串和JavaBean的Map),转换成JSON. 使用 @RequestBod ...
flask ajax 上传图片,flask jQuery ajax 上传文件
1.html 代码注:1.html 部分主要是一个form表单,其中表单的enctype = "multipart/form-data" 必须要有. 2.由于我的页面背景颜色设置 ...
jquery ajax实例get,jQuery中ajax的get()方法用法实例
本文实例讲述了jQuery中ajax的get()方法用法.分享给大家供大家参考.具体分析如下: $.get()通过 HTTP GET请求从服务器上请求数据. 语法结构: $.get(url, [dat ...
ajax token验证实例,实例详解jQuery Ajax使用Token验证身份
因为最近做了几个后台,所以经常会涉及到Token验证身份操作后台,所以这里记录一个如何向后台传请求头和Token.本文主要介绍了jQuery Ajax使用Token验证身份实例代码,需要的朋友可以参考 ...
Spring MVC Controller与jquery ajax请求处理json
在用 spring mvc 写应用的时候发现jquery传递的[json数组对象]参数后台接收不到,多订单的处理,ajax请求: var cmd = {orders:[{"storeId&q ...

使用Jquery，Ajax+Struts+Spring+Ibatis写的一个无限级树，供大家参考一下

使用Jquery，Ajax+Struts+Spring+Ibatis写的一个无限级树，供大家参考一下相关推荐

最新文章

热门文章