下拉选择框的代码实现

来源:互联网 发布:ubuntu16.04安装mysql 编辑:程序博客网 时间:2024/05/21 19:29
关于下拉框的使用
1.当我们在重复的使用下拉框时,可以在common.js中写一个公共的js接口供他人使用,利人利己。
2.下面来谈谈如何操作。
2.1 首先在公共common.js中创建一个新的js,命名为function.js
2.2 其次在js中定义这个下拉框的方法
function getDropDownData(url){
var html = "";
$.ajax({
url : url,
type : "post",
dataType : "json",
async : false,
success : function(data){
if(data.status == "success"){
var dataList = data.dataList;
for(var i=0;i<dataList.length;i++){
html + ='<option value="'+dataList[i].dataId+'">'+dataList[i].dataName+'</option>';


}
}else{
showSuccessOrErrorModal("获取数据失败","error");


}
},
error : function(e){
showSuccessOrErrorModal("请求出错了","error");

}
});
return html;

}



//上方的showSuccessOrErrorModal在项目中运用的比较多,这时候我们也会对此做一个公共的模态框接口,方便使用
//成功或失败型弹出框,content为弹出的信息,textType为弹出框类型
function showSuccessOrErrorModel(content,textType){
swal({
title : "",
text : content,
type : textType,
confirmButtonText : "确认",
closeOnConfirm : true

});
}




2.3 接口写好了之后,在js中就可以直接调用
 //初始化的时候就加载下拉框
$(document).ready(function(){
$("#id").append(getDropDownData('enrollBatch/getLearningBatchSelect.do'));
});


2.4 写控制层
  //获取下拉信息列表
@RequestMapping("/getLearningBatchSelect.do")
@ResponseBody
public object getLearningBatchSelect(HttpServletRequest request,HttpServletResponse response){
Map<String,Object>resultMap =new HashMap<String,Object>();
Map<String,Object>paramMap =new HashMap<String,Object>();
try{
List<Map<String,Object>> learningBatchSelectList = enrollBatchService.getLearningBatchSelect(paramMap);
resultMap.put("dataList",learningBatchSelectList);//这里的dataList和公共方法中的一致
resultMap.put("status","success");
} catch (Exception e) {
logger.error("获取信息异常",e);
resuleMap.put("status","error");
resultMap.put("msg","查询列表信息失败");


}
return resultMap;




}


2.5 略过dao层和service层,现在写serviceImpl层
//获取下拉信息实现层
public List<Map<String,Object>> getLearningBatchSelect(Map<String,Object>paramMap){
return enrollBatchMapper.getLearningBatchSelect(paramMap);


}
2.6 最后是mapper.xml(关键的一步)
<!--获取下拉信息-->
<mapper>
<select id="getLearningBatchSelect" parameterType ="java.util.Map" resultType="java.util.Map">
select 
id as "dataId",
batch_name as "dataName"
from 表名
</select>
</mapper>








/////////补充:当我们点击编辑时,需要获取到对象的基本信息,然后再进行修改,这时候的下拉该怎么做
$("#learningBatch_edit option").each(function(){
if($(this).val() == enrollBatchMap.learningBatchId)
{
$(this).attr("selected",'selected');
return false;

}
})