下拉选择框的代码实现
来源:互联网 发布: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;
}
})
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;
}
})
阅读全文
0 0
- 下拉选择框的代码实现
- 实现google的下拉选择
- Spinner 实现下拉框选择
- Ext实现下拉选择框
- 下拉框组件的实现在代码
- 实现下拉框分页的js代码
- 利用chosen.js插件实现下拉可搜索多选,控制选择个数,选项框复位,修改下拉选项的功能(附代码)
- <下拉框实现、一> - SAP ABAP 报表选择屏幕下拉框的实现
- 多级关联下拉选择框的高效实现
- 下拉框选择后,失去焦点的JS实现
- 用jquery实现简单的年月日下拉框选择
- jsp实现下拉框选项下有选择的显示
- 【php】深入探讨php下拉框选择的实现方法
- 深入探讨PHP下拉框选择的实现方法
- 类似QQ登录账号下拉选择框的一种实现
- jquery实现下拉框左右选择的效果
- MagicSuggest实现根据输入进行选择提示的下拉框
- 类似ios select下拉选择框的实现
- Getting Error
- magento2 前端表单验证
- 你好,CSDN
- Hadoop伪分布式搭建笔记记录
- 9月25日云栖精选夜读:阿里云发布自研商用关系型数据库POLARDB
- 下拉选择框的代码实现
- 推荐一些深度学习比较好的文章
- ros::spin() 和 ros::spinOnce() 区别及详解
- 动态代理与AOP(2)
- Android设置ListView的分割线长度
- 我是怎么阅读kubernetes源代码的?
- 2.idea下springboot项目的热部署
- 百度音乐API抓取
- C#中word转pdf代码