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

5、对应的接口代码

[java]  view plain copy

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

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

[java]  view plain copy

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

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