使用ajax加载数据字典表并加载到页面下拉选框

数据字典表 base_dict

后附数据库sql文件 

jsp页面加载数据字典jquery代码

使用了jsonlib进行封装json需要几个包 链接如下： https://download.csdn.net/download/qq_41009846/10697320

/* 使用ajax从后台动态加载数据字典  生成下拉选框     
	typecode：数据字典类型
	positionId：将下拉选放入的标签id
	selectame：生成下拉选时select标签的那么属性值
	selectedid：需要回显时选中的那个option
 */
	function loadSelect(typecode,positionId,selectname,selectedId){
			// 创建select对象   将name属性指定
			var $select = $("<select name="+selectname+"></select>");//$select前的$表示他是一个jquery对象
			//添加提示选项
			$select.append($("<option value=''>---请选择---</option>"));
			//使用jquery的ajax方法  访问后台action
			$.post("${pageContext.request.contextPath}/BaseDictAction",{dict_type_code:typecode},
			function(data){
				//遍历代码
				$.each(data,function(i,json){
				//每次遍历创建一个option对象   并添加到select对象（判断一下是否需要回显）
					var $option = $("<option value='"+json['dict_id']+"'>"+json["dict_item_name"]+"</option>");
					if(json['dict_id']==selectedId){
					/* 判断是否需要回显 */
						$option.attr("selected","selected");
					}
					/* 添加select对象 */
					$select.append($option);
				});
			},"json");
			//放回json数组对象，对其进行遍历   
			//将最终组装好的select对象放入页面指定位置
		 	$("#"+positionId).append($select);
	}
	

在页面初始化的时候显示不同下拉选的内容

<script type="text/javascript">

	$(document).ready(function(){
		loadSelect("006", "level", "cust_level.dict_id");
		loadSelect("002", "source", "cust_source.dict_id",);
		loadSelect("001", "industry", "cust_industry.dict_id");
	});
</script>

这里有必要说明以下第三个参数
也就是 selectame：生成下拉选时select标签的那么属性值
由于这段业务代码是处在保存新用户的业务环境下
也就是说有一个customer对象
customer.java的字段如下：

private Integer cust_id;
	private String cust_name;
	private Integer cust_user_id;
	private Integer cust_create_id;
//	private String cust_source;
//	private String cust_industry;
//	private String cust_level;
	private String cust_linkman;
	private String cust_phone;
	private String cust_mobile;

//	应用关联的数据字典对象
	private BaseDict cust_source;//引用客户来源
	private BaseDict cust_industry;//引用客户行业
	private BaseDict cust_level;//引用客户级别

也就是说页面加载的数据字典对象 每个下拉选有不同的对象 而且在数据库中不同的类型的id是不一样的 所以提交参数也就需要提交到数据字典对象的id属性上去
数据字典对象：（只粘贴字段部分 setter getter省略）

public class BaseDict {
	
	private String dict_id;
	private String dict_type_code;
	private String dict_type_name;
	private String dict_item_code;
	private String dict_item_name;
	private String dict_memo;
	private Integer dict_sort;
	private Character dict_enable;

如果需要在下拉选框中回显初始的选项 可以填入第四个参数，
实例代码如下

loadSelect("006", "level", "cust_level.dict_id",6);

另外需要注意的是，由于使用的是id选择器
则实例下拉选页面代码如下：

<td>客户级别 ：</td>
<td id="level">
</td>

后台代码

分析容易知道 后台需要使用ajax技术返回一个 json格式的list 在使用struts2的基础上 ，由于字典对象只有这一个用途（暂时） 所以直接使用重写execute方法

	@Override
	public String execute() throws Exception {
//		调用service 
		List<BaseDict> list = baseDictService.getByTypeCode( dict_type_code);
//		将jlist转化为json格式
//		包含中文  设置乱码解决
		ServletActionContext.getResponse().setContentType("application/json;charset=utf-8");
		String js = JSONArray.fromObject(list).toString();
//		将json发给浏览器
		ServletActionContext.getResponse().getWriter().write(js);
		return null;//告诉struts2不需要进行结果处理
	}

这里有必要把得到list的dao层getByTypeCode方法写一下
使用离线查询对象

@Override
	public List<BaseDict> getListByTypeCode(String dict_type_code) {
		
//		使用ceriatria
		DetachedCriteria dc = DetachedCriteria.forClass(BaseDict.class);
		dc.add(Restrictions.eq("dict_type_code", dict_type_code));
		List<BaseDict> list = (List<BaseDict>) getHibernateTemplate().findByCriteria(dc);
		return list;
	}

到此 ajax加载下拉选的代码基本结束
下面是页面效果

数据库sql

# Host: localhost  (Version: 5.5.49)
# Date: 2018-09-30 11:01:46
# Generator: MySQL-Front 5.3  (Build 4.13)

/*!40101 SET NAMES utf8 */;

#
# Source for table "base_dict"
#

DROP TABLE IF EXISTS `base_dict`;
CREATE TABLE `base_dict` (
  `dict_id` varchar(32) NOT NULL COMMENT '数据字典id(主键)',
  `dict_type_code` varchar(10) NOT NULL COMMENT '数据字典类别代码',
  `dict_type_name` varchar(64) NOT NULL COMMENT '数据字典类别名称',
  `dict_item_name` varchar(64) NOT NULL COMMENT '数据字典项目名称',
  `dict_item_code` varchar(10) DEFAULT NULL COMMENT '数据字典项目(可为空)',
  `dict_sort` int(10) DEFAULT NULL COMMENT '排序字段',
  `dict_enable` char(1) NOT NULL COMMENT '1:使用 0:停用',
  `dict_memo` varchar(64) DEFAULT NULL COMMENT '备注',
  PRIMARY KEY (`dict_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

#
# Data for table "base_dict"
#

INSERT INTO `base_dict` VALUES ('1','001','客户行业','教育培训 ',NULL,1,'1',NULL),('10','003','公司性质','民企',NULL,3,'1',NULL),('12','004','年营业额','1-10万',NULL,1,'1',NULL),('13','004','年营业额','10-20万',NULL,2,'1',NULL),('14','004','年营业额','20-50万',NULL,3,'1',NULL),('15','004','年营业额','50-100万',NULL,4,'1',NULL),('16','004','年营业额','100-500万',NULL,5,'1',NULL),('17','004','年营业额','500-1000万',NULL,6,'1',NULL),('18','005','客户状态','基础客户',NULL,1,'1',NULL),('19','005','客户状态','潜在客户',NULL,2,'1',NULL),('2','001','客户行业','电子商务',NULL,2,'1',NULL),('20','005','客户状态','成功客户',NULL,3,'1',NULL),('21','005','客户状态','无效客户',NULL,4,'1',NULL),('22','006','客户级别','普通客户',NULL,1,'1',NULL),('23','006','客户级别','VIP客户',NULL,2,'1',NULL),('24','007','商机状态','意向客户',NULL,1,'1',NULL),('25','007','商机状态','初步沟通',NULL,2,'1',NULL),('26','007','商机状态','深度沟通',NULL,3,'1',NULL),('27','007','商机状态','签订合同',NULL,4,'1',NULL),('3','001','客户行业','对外贸易',NULL,3,'1',NULL),('30','008','商机类型','新业务',NULL,1,'1',NULL),('31','008','商机类型','现有业务',NULL,2,'1',NULL),('32','009','商机来源','电话营销',NULL,1,'1',NULL),('33','009','商机来源','网络营销',NULL,2,'1',NULL),('34','009','商机来源','推广活动',NULL,3,'1',NULL),('4','001','客户行业','酒店旅游',NULL,4,'1',NULL),('5','001','客户行业','房地产',NULL,5,'1',NULL),('6','002','客户信息来源','电话营销',NULL,1,'1',NULL),('7','002','客户信息来源','网络营销',NULL,2,'1',NULL),('8','003','公司性质','合资',NULL,1,'1',NULL),('9','003','公司性质','国企',NULL,2,'1',NULL);