一个基于json+jquery+SSH2的级联制作

一个基于json+jquery+SSH2的级联制作

 

下面是我的一个二级菜单案例，基于这种方案，你做多少级菜单都行。

jquery.jsp页面重要代码如下：
<script type="text/javascript">
        $(function(){
            $("#item").change(function(){
                if($("#item").val()==""){
                    $("#twoitem").html('<option value="">==请选择小类别==</option>');
                    return ;
                }
                $.getJSON("show_twoitem.action",{"items.id":$("#item").val(),"time":(new Date()).getTime()},function(data){
                    $("#twoitem").html("");
                    $.each(data.twoitem, function(index, two){
                        $("#twoitem").append("<option value="+two[0]+">"+two[1]+"</option>");
                    });
                });
            });
        });
</script>

 

表示里面的下拉列表：
<select id="item" name="shop.shop_item" style="vertical-align:middle; margin-top:2px; width:150px;">
        <option value="" selected="selected">==请选择大类别==</option>
        <s:iterator id="item" value="item">
             <option value='<s:property value="#item.id"/>'><s:property value="#item.item_name"/></option>
        </s:iterator>
</select>
<select id="twoitem" name="shop.shop_twoitem" style="vertical-align:middle; margin-top:2px; width:150px;">
        <option value="" selected="selected">==请选择小类别==</option>
</select>

至于select里面的name表示什么不用管，因为我们做的是异步，跟它没关系。
当我们进入jquery.jsp页面的时候必须把第一个下拉列表给查询出来，这个很简单的吧，就一个action跳转进来传进来就OK。
数据库相关表的结构如下(数据是随便添加的)：
item表
id  item_name
1    aaa
2    bbb
twoitem表
id  twoitem_name   pid(item表的外键)
1    a1a1a1         2
2    b1b1b1         1
3    c1c1c1         2
那么执行一个action到jquery.jsp后就有了第一个下拉列表的数据：
<select id="item">
 <option value="" selected="selected">==请选择大类别==</option>
 <option>
  <option value="1">aaa</option>
  <option value="2">bbb</option>
 </option>
</select>
当我们选择下拉列表的时候就会触发：
 $("#item").change(function(){
                if($("#item").val()==""){
                    $("#twoitem").html('<option value="">==请选择小类别==</option>');
                    return ;
                }
                $.getJSON("show_twoitem.action",{"items.id":$("#item").val(),"time":(new Date()).getTime()},function(data){
                    $("#twoitem").html("");
                    $.each(data.twoitem, function(index, two){
                        $("#twoitem").append("<option value="+two[0]+">"+two[1]+"</option>");
                    });
                });
            });
这样就去了show_twoitem.action
struts.xml与之相对应的配置如下：
<package name="json" extends="json-default">
 <action name="show_twoitem" class="show_twoitem" method="show_twoitem">
  <result type="json" />
 </action>
</package>
说明：这里一定要extends="json-default" 和 <result type="json" /> 
class="show_twoitem" 是spring注入的，这里不多说，不重要； 那么method="show_twoitem"就是我们要调用的方法；代码如下：
public String show_twoitem(){
 twoitem=shopdaoimpl.queryTwo_itemByID(items.getId());  //根据item的ID把对应的二级相关的给查询出来
 return SUCCESS;
}
这里twoitem是一个list,必须有setter 和 getter 方法（当然是为了传值）
shopdaoimpl.queryTwo_itemByID表示调用的impl类的一个方法，这里shopdaoimpl用spring注入

 

好了，到这里基本功能已经实现，最后的twoitem传回了jquery.jsp页面
如果成功，$.getJSON() 里面fucntion(data)的data就是返回来的json数据，根据不同情况(数据或对象处理不一样)去取。
然后通过append方法，一切OK。

通过类似的方法，我们可以做更多的菜单，三级，四级。。。都没问题
这是我们办法，与大家分享。
不知道你有没有更好的办法呢，有的话，不如给我们也分享一下呢。