首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2013-10-09 
实例:Easyui的combobox实现动态数据级联实现从数据库中动态获取对应的List集合,并在Easyui的combobox中显

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

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

实现的效果如下:

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


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


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

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

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


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

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


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

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


4、对应的Action代码

<%@ 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>



热点排行