一个基于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。
通过类似的方法,我们可以做更多的菜单,三级,四级。。。都没问题
这是我们办法,与大家分享。
不知道你有没有更好的办法呢,有的话,不如给我们也分享一下呢。