实例：Easyui的combobox实现动态数据级联

实现从数据库中动态获取对应的List集合，并在Easyui的combobox中显示出来。

实现的效果如下：

1、数据库的表设计如图所示

2、数据库中填写相关的数据，如图所示。如图所示【法律法规】是所属栏目，因此他的字段parentid是0。【中国公民出国】、【内地居民往来港澳】是属于法律法规的类别。因此他们的字段parentid是对应1，【法律法规】的字段categoryid是1.

3、相关的配置：已经在前面的博客中写了http://blog.csdn.net/lhq13400526230/article/details/9158111

这里就不多写。只把关键代码贴出来。

4、对应的Action代码

[java]  view plain copy

1. package crj.portal.web.management.action;  
2. import java.io.IOException;  
3. import java.util.List;  
4. import javax.servlet.http.HttpServletRequest;  
5. import javax.servlet.http.HttpServletResponse;  
6. import net.sf.json.JSONArray;  
7. import net.sf.json.JSONObject;  
8. import net.sf.json.JsonConfig;  
9. import org.apache.log4j.Logger;  
10. import org.apache.struts2.ServletActionContext;  
11. import org.hibernate.Criteria;  
12. import org.hibernate.criterion.Order;  
13. import com.sun.tools.javac.util.Log;  
14. import crj.portal.web.management.model.Cpersontypetbl;  
15. import crj.portal.web.management.service.CategoryService;  
16. import crj.portal.web.management.service.ItemService;  
17. import crj.portal.web.management.service.UserService;  
18. public class ItemManageAction  {  
19.     Logger log=Logger.getLogger(this.getClass());  
20.     private String page;  
21.     private String rows;  
22.     private String lanmuid;  
23.     private ItemService itemService;// 依赖注入  
24.     //下拉框--查询栏目  
25.     public String categorytbl() throws Exception{  
26.         List list=itemService.queryLanMu();  
27.         this.toJsonArray(list);  
28.         return null;  
29.     }  
30.     //根据栏目的ID 查询拥有的类别  
31.     public String leibie() throws Exception{  
32.         List list=itemService.queryLeiBie(lanmuid);  
33.         this.toJsonArray(list);  
34.         return null;  
35.     }  
36.     public String toJsonArray(List list) throws IOException{  
37.         HttpServletResponse response = ServletActionContext.getResponse();  
38.         HttpServletRequest request = ServletActionContext.getRequest();  
39.         JSONArray json = JSONArray.fromObject(list);  
40.         log.info("JSON格式：" +json.toString());   
41.         response.setCharacterEncoding("utf-8");// 指定为utf-8  
42.         response.getWriter().write(json.toString());// 转化为JSOn格式  
43.         return null;  
44.     }  
45.     public String save() throws Exception {  
46.         return this.alllist();  
47.     }  
48.     public ItemService getItemService() {  
49.         return itemService;  
50.     }  
51.     public void setItemService(ItemService itemService) {  
52.         this.itemService = itemService;  
53.     }  
54.     public String getPage() {  
55.         return page;  
56.     }  
57.     public void setPage(String page) {  
58.         this.page = page;  
59.     }  
60.     public String getRows() {  
61.         return rows;  
62.     }  
63.     public void setRows(String rows) {  
64.         this.rows = rows;  
65.     }  
66.     public UserService getUserService() {  
67.         return userService;  
68.     }  
69.     public void setUserService(UserService userService) {  
70.         this.userService = userService;  
71.     }  
72.     public CategoryService getCategoryService() {  
73.         return categoryService;  
74.     }  
75.     public void setCategoryService(CategoryService categoryService) {  
76.         this.categoryService = categoryService;  
77.     }  
78.     public String getLanmuid() {  
79.         return lanmuid;  
80.     }  
81.     public void setLanmuid(String lanmuid) {  
82.         this.lanmuid = lanmuid;  
83.     }  
84. }  

5、对应的接口代码

[java]  view plain copy

1. public interface ItemService {  
2.     //下拉框--查询栏目  
3.     public List queryLanMu() throws Exception;  
4.     //下拉框--查询类别  
5.     public List queryLeiBie(String ids) throws Exception;         
6. }  

6、对应的接口实现类代码

[java]  view plain copy

1. public class ItemServiceImpl implements ItemService {  
2.     Logger log = Logger.getLogger(this.getClass());  
3.     private SessionFactory sessionFactory;  
4.     //下拉框--查询栏目  
5.     public List queryLanMu() throws Exception {  
6.         Criteria criteria=this.sessionFactory.getCurrentSession().createCriteria(Categorytbl.class);  
7.         criteria.add(Restrictions.eq("parentid", 0));  
8.         criteria.addOrder(Order.asc("categoryid"));  
9.         return criteria.list();  
10.     }  
11.     //下拉框--查询类别  
12.     public List queryLeiBie(String ids) throws Exception {  
13.         int i=Integer.parseInt(ids);  
14.         Criteria criteria=this.sessionFactory.getCurrentSession().createCriteria(Categorytbl.class);  
15.         criteria.add(Restrictions.eq("parentid", i));  
16.         criteria.addOrder(Order.asc("categoryid"));  
17.         return criteria.list();  
18.     }  
19.     public SessionFactory getSessionFactory() {  
20.         return sessionFactory;  
21.     }  
22.     public void setSessionFactory(SessionFactory sessionFactory) {  
23.         this.sessionFactory = sessionFactory;  
24.     }  
25. }  

7、对应的JSP代码

[html]  view plain copy

1. <%@ page language="java" errorPage="/error.jsp" pageEncoding="utf-8"%>  
2. <%@ taglib prefix="s" uri="/struts-tags"%>  
3. <%  
4.     String path = request.getContextPath();  
5. %>  
6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
8. <html>  
9. <head>  
10. <title>信息管理</title>  
11. <!-- 引入Jquery -->  
12. <script type="text/javascript" src="<%=path%>/easyui_1.3.2/jquery-1.8.0.min.js" charset="utf-8"></script>  
13. <!-- 引入Jquery_easyui -->  
14. <script type="text/javascript"   src="<%=path%>/easyui_1.3.2/jquery.easyui.min.js" charset="utf-8"></script>  
15. <!-- 引入easyUi国际化--中文 -->  
16. <script type="text/javascript"   src="<%=path%>/easyui_1.3.2/locale/easyui-lang-zh_CN.js"  charset="utf-8"></script>  
17. <!-- 引入easyUi默认的CSS格式--蓝色 -->  
18. <link rel="stylesheet" type="text/css"   href="<%=path%>/easyui_1.3.2/themes/default/easyui.css" />  
19. <!-- 引入easyUi小图标 -->  
20. <link rel="stylesheet" type="text/css"   href="<%=path%>/easyui_1.3.2/themes/icon.css" />  
21. <script type="text/javascript">  
22.     $(function() {        
23.     // 下拉框选择控件，下拉框的内容是动态查询数据库信息  
24.     $('#lanmu').combobox({   
25.                 url:'itemManage!categorytbl',   
26.                 editable:false, //不可编辑状态  
27.                 cache: false,  
28.                 panelHeight: 'auto',//自动高度适合  
29.                 valueField:'categoryid',     
30.                 textField:'categoryName',  
31.     onHidePanel: function(){  
32.             $("#leibie").combobox("setValue",'');  
33.             var lanmuid = $('#lanmu').combobox('getValue');       
34.             $.ajax({  
35.                 type: "POST",  
36.                 url: "itemManage!leibie?lanmuid="+lanmuid,  
37.                 cache: false,  
38.                 dataType : "json",  
39.                 success: function(data){  
40.                 $("#leibie").combobox("loadData",data);  
41.                                }  
42.                         });       
43.                     }  
44.                });   
45.     $('#leibie').combobox({   
46.         //url:'itemManage!categorytbl',   
47.         editable:false, //不可编辑状态  
48.         cache: false,  
49.         panelHeight: 'auto',//自动高度适合  
50.         valueField:'categoryid',     
51.         textField:'categoryName'  
52.        });  
53.     });  
54. </script>  
55. </head>  
56. <body>  
57.     <!-- 工具拦 -->  
58.     <div id="tb" style="padding: 3px">  
59.       <form >  
60.             <span>所属栏目:</span>   
61.             <select  id="lanmu" class="lanmu" style="width:160px; border: 1px solid #ccc"> </select>  
62.             <span>类别:</span>   
63.             <select  id="leibie" class="leibie" style="width:160px; border: 1px solid #ccc"> </select>  
64.       </form>  
65.     </div>  
66. </body>  
67. </html>