struts2+spring3+ibatis下类似淘宝搜索的的三级互联效果

项目框架 struts2+spring3+ibatis

用了js+json+jq去实现这个效果

 

需要jquery-min.js
<script>
function selectOnchangeb(){
var obj=document.getElementById('myselecta');  
 
var index=obj.selectedIndex; //序号，取当前选中选项的序号  
 
var val = obj.options[index].value; 
  var sel = $("#optionb"); //二级下拉框Id

var parentID=val;
    //alert(parentID);
    $.getJSON("${context}/courseTtype/index/getCourseTypeSonTypes.action?parentID="+parentID,function call(data){  
             writeHtml(data); 
        });
}  
function writeHtml(data){
    var sel = $("#optionb"); //二级下拉框Id
    sel.empty();
      var objb=document.getElementById('optionb'); 
     objb.options.length=0;
      objb.add(new    Option("","")); 
   // alert(data);
$.each(data,function(i, item){//填充到二级下拉框
//alert(item.name);
                 // $("<option value='"+item.mainid+"'>"+item.name+"</option>").appendTo(sel);    //这个jq实现不了那个填充效果不知道为什么  无奈之下只能下面的js填充法去实现
                  var obj=document.getElementById('optionb');  
       //  添加一个选项  
         obj.add(new    Option(item.name,item.mainid));  
                }); 
                selectOnchangec();
}

function selectOnchangec(){
//alert('b');
//var obj=document.getElementById('optionb');  
 
//var index=obj.selectedIndex; //序号，取当前选中选项的序号  
      var selects=document.getElementsByName('optionb');
      var val;
    if(selects&&selects[0])
    {
       val=selects[0].value;
     }
 //val = obj.options[index].value; 
  var sel = $("#optionc"); //三 级下拉框Id

var parentID=val;
   // alert(parentID);
    $.getJSON("${context}/courseTtype/index/getCourseTypeSonTypes.action?parentID="+parentID,function call(data){  
             writeHtmlb(data); 
        });
}  
function writeHtmlb(data){
    var sel = $("#optionc"); //三级下拉框Id
    sel.empty();
      var objb=document.getElementById('optionc'); 
     objb.options.length=0;
      objb.add(new    Option("","")); 
   // alert(data);
$.each(data,function(i, item){//填充到二级下拉框
//alert(item.name);
                 // $("<option value='"+item.mainid+"'>"+item.name+"</option>").appendTo(sel);
                  var obj=document.getElementById('optionc');  
 
       //  添加一个选项  
         obj.add(new    Option(item.name,item.mainid));  
                }); 
}
</script>

 

             <select onchange="selectOnchangeb()" id="myselecta">
             <option value=""></option>
             <s:iterator id="useriterator" value="#request['CourseTypeBigTypes']" >
    <option value="<s:property value="mainid" />"><s:property value="name" /></option>        
    </s:iterator>
             </select>
             
             <select id="optionb" onchange="selectOnchangec()"><option value=""></option></select>
             <select id="optionc" ><option value=""></option></select>

 

 

后台：

ibatis

<select id="getCourseTypeBigTypes" resultMap="courseTypeResultMap"
  parameterClass="java.lang.String">
  select * from Base_CourseType where Type_ParentID=0
 </select>
 <select id="getCourseTypeSonTypes" resultMap="courseTypeResultMap"
  parameterClass="java.lang.String">
  select * from Base_CourseType where Type_ParentID=#parentID#
 </select>

 

action:

// 高级搜索 联动下拉框 第一个下拉框数据读取
 public String AdvancedSearch() {
  List CourseTypeBigTypes = courseTypeService.getCourseTypeBigTypes();
  HttpServletRequest request = ServletActionContext.getRequest();
  request.setAttribute("CourseTypeBigTypes", CourseTypeBigTypes);
  return SUCCESS;
 }

// 二级联动下拉框数据
 public void getCourseTypeSonTypes() throws IOException {
  List CourseTypeSonTypes = courseTypeService.getCourseTypeSonTypes(this
    .getParameter("parentID"));
  List list = new ArrayList();
  list = CourseTypeSonTypes;
  List listb = new ArrayList();
  StringBuffer selectoptions = new StringBuffer();
  for (Iterator i = list.iterator(); i.hasNext();) {
   CourseType map = (CourseType) i.next();
   String mid = map.getMainid();
   String name =  map.getName();
   selectoptions.append("<option value='" + mid + "'>" + name + "</option>") ;
   listb.add(map);
  }
  
  
  JSONArray jsonArray = JSONArray.fromObject(listb);

  HttpServletResponse hsr = ServletActionContext.getResponse();
  //hsr.getWriter().write(selectoptions.toString());
  PrintWriter writer;
  try {
  writer = hsr.getWriter();
  writer.print(jsonArray);
  writer.flush();
  writer.close();

  } catch (IOException e) {
  // TODO Auto-generated catch block
  e.printStackTrace();
  }

  // return SUCCESS;
 }  

 

页面要调用 onload

 

<body onload="selectOnchangeb();">

 

daoimpl

:
 @Override
 public List getCourseTypeBigTypes() {
  List list = new ArrayList();
  list = this.getSqlMapClientTemplate().queryForList(
    "getCourseTypeBigTypes");
  return list;
 }

 @Override
 public List getCourseTypeSonTypes(String parentID) {
  // TODO Auto-generated method stub
  List list = new ArrayList();
  list = this.getSqlMapClientTemplate().queryForList(
    "getCourseTypeSonTypes",parentID);
  return list;
 }

 

 

这个功能花了我一天多时间

 

 

 

sql:

create table hulianType (
   MainID               varchar(36)          not null,
   Type_Name            varchar(50)          not null,
   Type_ParentID        varchar(36)          not null,
   Type_CreateDate      datetime             not null,
   Type_IsSystemDefine  int                  null,
   Type_Describe        text                 null,
   constraint PK_hulianType  primary key (MainID)
)

 

 

转载请注明作者 谢谢 如有不清楚的同学可以 QQ交流 6637152

评论

4 楼 zqb666kkk 2011-10-23  

macrotea 写道

浩男?

通过zTree,无限级别联动

恩   发个例子给我看看

3 楼 macrotea 2011-10-22  

浩男?

通过zTree,无限级别联动

2 楼 左手边 2011-10-21  

有点乱

1 楼 zqb666kkk 2011-10-20  

  自己支持下