场景
效果
select2相关
select2官网:
实现
引入select2
页面中需要引入select.full.min.js和select2.min.css以及jauery。
引入方式具体要根据自己使用的模板或相关技术,如果使用html就是最简单的引入js文件和css文件的方式。
这里使用的是Thymeleaf模板的方式引入。
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
th:replace="layout/layout(title='质检单',cssPaths='/public/css/plugins/select2/select2.min.css,/public/css/plugins/select2/quality_add.css,/public/css/plugins/datapicker/datepicker3.css,/public/css/plugins/dataTables/datatables.min.css,/public/css/plugins/daterangepicker/daterangepicker-bs3.css,/public/css/plugins/jsTree/style.min.css',jsPaths='/public/js/plugins/select2/select2.full.min.js,/public/js/plugins/datapicker/bootstrap-datepicker.js,/public/js/plugins/dataTables/datatables.min.js,/public/js/plugins/dataTables/dataTables.bootstrap4.min.js,/public/js/plugins/fullcalendar/moment.min.js,/public/js/plugins/daterangepicker/daterangepicker.js,/public/js/plugins/jsTree/jstree.min.js,/public/js/plugins/sweetalert/sweetalert2.all.min.js,/public/js/plugins/ladda/spin.min.js,/public/js/plugins/ladda/ladda.min.js,/public/js/plugins/ladda/ladda.jquery.min.js,/public/js/plugins/validate/jquery.validate.min.js,/public/js/plugins/validate/validate_zh.js,/modular/utils.js,/modular/qualityTest/quality_add.js')">
Html代码
select部分的代码:
<select class="select2_material form-control" data-placeholder="请选择一种物料"
id="materielNumber" name="materielNumber" >
</select>
注意其class属性和id以及name属性。
此select在模态框中,完整模态框代码:
<div class="modal inmodal" id="apAddAndEidtModel" role="dialog" aria-hidden="true">
<div class="modal-dialog" id="apAddAndEidtDiv" th:fragment="apAddAndEidtDiv">
<div class="modal-content animated fadeIn">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span
aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<i class="fa fa-plus-circle modal-icon pl-1p75"></i>
<h4 class="modal-title" th:text="${dlgTitle}">添加质检单明细信息</h4>
<small><span th:text="${dlgSubtitle}">您可以在此窗口中添加质检单明细信息</span></small>
</div>
<form id="apAddOrEidtForm" role="form">
<div class="modal-body">
<div class="form-row">
<input type="hidden" class="form-control" name="id" id="id"/>
<input type="hidden" class="form-control" name="op" th:value="${op}"/>
<input type="hidden" id="serial">
<input type="hidden" id="ifEdit">
<div class="form-group col-md-6">
<div class="form-group " id="fromgroup">
<label class="font-normal">物料编码</label>
<select class="select2_material form-control" data-placeholder="请选择一种物料"
id="materielNumber" name="materielNumber" >
</select>
</div>
</div>
<div class="form-group col-md-6">
<label>物料名称</label>
<input type="text" readonly class="form-control" name="materielName"/>
<input type="hidden" readonly class="form-control" name="materielCode"/>
</div>
<div class="form-group col-md-6">
<label>数量</label>
<input type="number" placeholder="请输入数量" class="form-control" name="num" id="num"
/>
</div>
<div class="form-group col-md-6">
<label>供应商批次号</label>
<input type="text" placeholder="请输入供应商批次号" class="form-control" name="batch" id="batch"
/>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
<button type="submit" class="btn btn-primary">保存</button>
</div>
</form>
</div>
</div>
</div>
Jquery部分代码
需要在页面加载完成后就初始化select元素,所以代码写在:
$(document).ready(function (){});
中。
代码:
$(document).ready(function (){
var select2 = function () {
$(".select2_material").select2({
dropdownParent: $('.modal-content'),
placeholder: "物料编码/物料名称",
allowClear: true,
ajax: {
url: '/busMaterielManage/searchMaterielSelectData',
dataType: 'json',
data: function (params) {
var query = {
param: params.term //params.term 搜索参数值
}
return query;
},
processResults: function (data) {
//返回最终数据data 给dataArray
var dataArray = [];
for (var i = 0; i < data.length; i++) {
var dataObj = {};
dataObj.id = data[i].materielNumber;
dataObj.text = data[i].materielNumber + " / " + data[i].materielName;
dataArray.push(dataObj);
}
return {
results: dataArray
};
},
error: function (error) {
}
}
});
}
select2();
});
注:
1.dropdownParent: $('.modal-content')是声明其父级元素,避免select的下拉框被modal框遮盖。
2. data: function (params) {
var query = {
param: params.term //params.term 搜索参数值
}
return query;
},
就是获取select框中所输入的值。
3. url: '/busMaterielManage/searchMaterielSelectData',
通过url请求后台获取数据。
4.processResults:是请求数据成功之后的回调方法吗,将返回的数据封装并最终赋值给results即可。
5.最后调用上面声明的函数自身。
后台逻辑代码
后台使用SpringBoot+MyBatisPlus查询数据,大体思路就是根据传递的参数,模糊搜索数据返回一个list。
Controller层:
@Description("获取物料管理编辑页面")
@ResponseBody
@RequestMapping("/searchMaterielSelectData")
public List<BusMaterielInfo> searchMaterielSelectData(String param){
return busMaterielInfoService.searchMaterielSelectData(param);
}
Service层:
List<BusMaterielInfo> searchMaterielSelectData(String param);
ServiceImpl层:
@Override
public List<BusMaterielInfo> searchMaterielSelectData(String param) {
List<BusMaterielInfo> materielInfoList=null;
try{
materielInfoList=new ArrayList<>();
if(StringUtils.isBlank(param)){
return materielInfoList;
}
QueryWrapper<BusMaterielInfo> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("deleted_flag",0);
if(StringUtils.isNotBlank(param)) {
queryWrapper.and(wrapper -> wrapper.like("materiel_number", param).or().like("materiel_name", param));
}
materielInfoList=busMaterielInfoMapper.selectList(queryWrapper);
}catch (Exception ex){
Log.getInst(this).error(ex.getMessage());
}
return materielInfoList;
}
上面效果中的选择之后的联动实现
$("#materielNumber").on("change", function (e) {
var materielCode = $("#materielNumber").val();
if (materielCode) {
$.post({
url: "/busMateriel/getOneByCode",
data: {code: materielCode}
}).done(function (res) {
if (res) {
$("input[name='materielName']").val(res.materielName);
$("input[name='materielCode']").val(res.materielNumber);
}
})
}
})
获取上面select的值并传递到后台请求数据后返回给前台进行赋值。