Easyui的combobox实现动态数据级联效果
程序员文章站
2024-03-12 12:22:14
实现从数据库中动态获取对应的list集合,并在easyui的combobox中显示出来。
实现的效果如下:
1、数据库的表设计如图所示...
实现从数据库中动态获取对应的list集合,并在easyui的combobox中显示出来。
实现的效果如下:
1、数据库的表设计如图所示
2、数据库中填写相关的数据,如图所示。如图所示【法律法规】是所属栏目,因此他的字段parentid是0。【中国公民出国】、【内地居民往来港澳】是属于法律法规的类别。因此他们的字段parentid是对应1,【法律法规】的字段categoryid是1.
3、相关的配置:已经在前面的博客中写了
这里就不多写。只把关键代码贴出来。
4、对应的action代码
package crj.portal.web.management.action; import java.io.ioexception; import java.util.list; import javax.servlet.http.httpservletrequest; import javax.servlet.http.httpservletresponse; import net.sf.json.jsonarray; import net.sf.json.jsonobject; import net.sf.json.jsonconfig; import org.apache.log4j.logger; import org.apache.struts2.servletactioncontext; import org.hibernate.criteria; import org.hibernate.criterion.order; import com.sun.tools.javac.util.log; import crj.portal.web.management.model.cpersontypetbl; import crj.portal.web.management.service.categoryservice; import crj.portal.web.management.service.itemservice; import crj.portal.web.management.service.userservice; public class itemmanageaction { logger log=logger.getlogger(this.getclass()); private string page; private string rows; private string lanmuid; private itemservice itemservice;// 依赖注入 //下拉框--查询栏目 public string categorytbl() throws exception{ list list=itemservice.querylanmu(); this.tojsonarray(list); return null; } //根据栏目的id 查询拥有的类别 public string leibie() throws exception{ list list=itemservice.queryleibie(lanmuid); this.tojsonarray(list); return null; } public string tojsonarray(list list) throws ioexception{ httpservletresponse response = servletactioncontext.getresponse(); httpservletrequest request = servletactioncontext.getrequest(); jsonarray json = jsonarray.fromobject(list); log.info("json格式:" +json.tostring()); response.setcharacterencoding("utf-8");// 指定为utf-8 response.getwriter().write(json.tostring());// 转化为json格式 return null; } public string save() throws exception { return this.alllist(); } public itemservice getitemservice() { return itemservice; } public void setitemservice(itemservice itemservice) { this.itemservice = itemservice; } public string getpage() { return page; } public void setpage(string page) { this.page = page; } public string getrows() { return rows; } public void setrows(string rows) { this.rows = rows; } public userservice getuserservice() { return userservice; } public void setuserservice(userservice userservice) { this.userservice = userservice; } public categoryservice getcategoryservice() { return categoryservice; } public void setcategoryservice(categoryservice categoryservice) { this.categoryservice = categoryservice; } public string getlanmuid() { return lanmuid; } public void setlanmuid(string lanmuid) { this.lanmuid = lanmuid; } }
5、对应的接口代码
public interface itemservice { //下拉框--查询栏目 public list querylanmu() throws exception; //下拉框--查询类别 public list queryleibie(string ids) throws exception; }
6、对应的接口实现类代码
public class itemserviceimpl implements itemservice { logger log = logger.getlogger(this.getclass()); private sessionfactory sessionfactory; //下拉框--查询栏目 public list querylanmu() throws exception { criteria criteria=this.sessionfactory.getcurrentsession().createcriteria(categorytbl.class); criteria.add(restrictions.eq("parentid", 0)); criteria.addorder(order.asc("categoryid")); return criteria.list(); } //下拉框--查询类别 public list queryleibie(string ids) throws exception { int i=integer.parseint(ids); criteria criteria=this.sessionfactory.getcurrentsession().createcriteria(categorytbl.class); criteria.add(restrictions.eq("parentid", i)); criteria.addorder(order.asc("categoryid")); return criteria.list(); } public sessionfactory getsessionfactory() { return sessionfactory; } public void setsessionfactory(sessionfactory sessionfactory) { this.sessionfactory = sessionfactory; } }
7、对应的jsp代码
<%@ page language="java" errorpage="/error.jsp" pageencoding="utf-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <% string path = request.getcontextpath(); %> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <!doctype html public "-//w3c//dtd html 4.01 transitional//en"> <html> <head> <title>信息管理</title> <!-- 引入jquery --> <script type="text/javascript" src="<%=path%>/easyui_1.3.2/jquery-1.8.0.min.js" charset="utf-8"></script> <!-- 引入jquery_easyui --> <script type="text/javascript" src="<%=path%>/easyui_1.3.2/jquery.easyui.min.js" charset="utf-8"></script> <!-- 引入easyui国际化--中文 --> <script type="text/javascript" src="<%=path%>/easyui_1.3.2/locale/easyui-lang-zh_cn.js" charset="utf-8"></script> <!-- 引入easyui默认的css格式--蓝色 --> <link rel="stylesheet" type="text/css" href="<%=path%>/easyui_1.3.2/themes/default/easyui.css" /> <!-- 引入easyui小图标 --> <link rel="stylesheet" type="text/css" href="<%=path%>/easyui_1.3.2/themes/icon.css" /> <script type="text/javascript"> /* 初始化下载表格信息 */ $(function() { // 下拉框选择控件,下拉框的内容是动态查询数据库信息 $('#lanmu').combobox({ url:'itemmanage!categorytbl', editable:false, //不可编辑状态 cache: false, panelheight: 'auto',//自动高度适合 valuefield:'categoryid', textfield:'categoryname', onhidepanel: function(){ $("#leibie").combobox("setvalue",''); var lanmuid = $('#lanmu').combobox('getvalue'); $.ajax({ type: "post", url: "itemmanage!leibie?lanmuid="+lanmuid, cache: false, datatype : "json", success: function(data){ $("#leibie").combobox("loaddata",data); } }); } }); $('#leibie').combobox({ //url:'itemmanage!categorytbl', editable:false, //不可编辑状态 cache: false, panelheight: 'auto',//自动高度适合 valuefield:'categoryid', textfield:'categoryname' }); }); </script> </head> <body> <!-- 工具拦 --> <div id="tb" style="padding: 3px"> <form > <span>所属栏目:</span> <select id="lanmu" class="lanmu" style="width:160px; border: 1px solid #ccc"> </select> <span>类别:</span> <select id="leibie" class="leibie" style="width:160px; border: 1px solid #ccc"> </select> </form> </div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 并发编程系列之Condition接口
下一篇: 把Jar文件转成exe安装文件的实现方法
推荐阅读
-
Easyui的combobox实现动态数据级联效果
-
easyui的下拉框动态级联加载的实现方法(附代码)
-
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
-
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
-
easyui combobox实现下拉框获取后端数据并多选和取值,实现textbox的隐藏框
-
easyui的下拉框动态级联加载的实现方法(附代码)
-
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果_jquery
-
EasyUi中的Combogrid 实现分页和动态搜索远程数据_javascript技巧
-
PHP安装网站的时候,前端动态显示数据库创建了哪个表的效果是怎么实现的?
-
PHP安装网站的时候,前端动态显示数据库创建了哪个表的效果是怎么实现的?