1.单选框的实现(搜索框)
//jsp页面
<div class="control-group span6" style="display: inline">
<label class="control-label" for="positionCode">库位:</label>
<div class="controls">
<div class="span12 required" style=" float: none !important;">
<input class="span10 select2_input" type="text" id="positionCode" name="positionCode"
value="${inventory.positionCode}">
</div>
</div>
</div>
//库位下拉框列表
$("#positionCode").select2({
placeholder: "--请选择库位--",//文本框的提示信息
minimumInputLength: 0, //至少输入n个字符,才去加载数据
allowClear: true, //是否允许用户清除文本信息
multiple: false,//false为单选框,true为复选框
formatNoMatches: "没有结果",
closeOnSelect: false,
ajax: {
url: context_path + "/inventory/getSelectPosition",
dataType: "json",
delay: 250,
data: function (term, pageNo) { //在查询时向服务器端传输的数据
term = $.trim(term);
selectParam = term;
return {
inventoryTaskId: $("#baseInfor #inventoryTaskId").val(),
queryString: term, //联动查询的字符
pageSize: 15, //一次性加载的数据条数
pageNo: pageNo, //页码
time: new Date()
//测试
}
},
results: function (data, pageNo) {
var res = data.result;
if (res.length > 0) { //如果没有查询到数据,将会返回空串
var more = (pageNo * 15) < data.total; //用来判断是否还有更多数据可以加载
return {
results: res,
more: more
};
} else {
return {
results: {
"id": "0",
"text": "没有更多结果"
}
};
}
},
cache: true
}
});
//库位下拉框change事件
$("#baseInfor #positionCode").on("change", function (e) {
$("#baseInfor #positionCode").val(e.added.text);
})
//后台controller层
/**
* @Description: 获取库位下拉列表数据源
* @Param:
* @return:
* @Author: pz
* @Date: 2019/1/27
*/
@RequestMapping(value = "/getSelectPositionCode")
@ResponseBody
public Map<String, Object> getSelectPositionCode(Long inventoryTaskId, String
queryString, int pageNo, int pageSize) {
Map<String, Object> map = new HashMap<>();
List<Map<String, Object>> PositionList = inventoryService.getSelectPositionList(inventoryTaskId, queryString, pageSize, pageNo);
map.put("result", PositionList);
map.put("total", inventoryService.getSelectPositionTotal(inventoryTaskId, queryString));
return map;
}
//service层
List<Map<String, Object>> getSelectPositionList(Long inventoryTaskId, String
queryString, int pageSize, int pageNo);
Integer getSelectPositionTotal(Long inventoryTaskId, String queryString);
//serviceImp实现层
@Override
public List<Map<String, Object>> getSelectPositionList(Long inventoryTaskId, String queryString, int pageSize, int pageNo) {
Page page = new Page(pageNo, pageSize);
return inventoryDAO.getSelectPositionList(page, inventoryTaskId, queryString);
}
@Override
public Integer getSelectPositionTotal(Long inventoryTaskId, String queryString) {
return inventoryDAO.getSelectPositionTotal(inventoryTaskId, queryString);
}
//Dao层
List<Map<String, Object>> getSelectMaterielList(Page page, @Param("inventoryTaskId")
Long inventoryTaskId, @Param("positionCode") String positionCode,
@Param("queryString") String queryString);
Integer getSelectMaterielTotal(@Param("inventoryTaskId") Long inventoryTaskId,
@Param("positionCode") String positionCode, @Param("queryString") String
queryString);
//xml层
<select id="getSelectMaterielList" resultType="java.util.Map">
select DISTINCT material_code as id,material_name as text
from inventory_task_detail
where position_code=#{positionCode}
and inventory_task_id=#{inventoryTaskId}
<if test='queryString!=null and queryString!=""'>
and material_name like concat(concat('%', #{queryString}), '%')
</if>
and state="0" or state="2"
</select>
<select id="getSelectMaterielTotal" resultType="java.lang.Integer">
select count(DISTINCT material_code)
from inventory_task_detail
where position_code=#{positionCode}
and inventory_task_id=#{inventoryTaskId}
<if test='queryString!=null and queryString!=""'>
and material_code like concat(concat('%', #{queryString}), '%')
</if>
and state="0" or state="2"
</select>
2.单选框的实现 (普通)
jsp页面(跳转页面时,获取信息)
<div class="control-group span6" style="display: inline">
<label class="control-label" for="inventoryUserId">盘点人员:</label>
<div class="controls">
<div class="input-append span12 required" style=" float: none !important;">
<select id="inventoryUserId" name="inventoryUserId" style="width:69%;">
<option value="">--请选择--</option>
<c:forEach items="${userList}" var="user">
<option value="${user.userId}"
<c:if test="${user.userId eq inventoryTask.inventoryUserId}">
selected</c:if> >${user.username}</option>
</c:forEach>
</select>
</div>
</div>
</div>
//后台controller层
@RequestMapping(value = "/toEdit")
@ResponseBody
public ModelAndView toEdit(Long id) {
ModelAndView mv = this.getModelAndView();
//获取用户集合
List<User> userList = userService.selectList(
new EntityWrapper<>()
);
mv.addObject("userList", userList);
mv.setViewName("techbloom/stock/inventory/inventoryTask_edit");
return mv;
}
3.依据条件模糊搜素
<li class="field-group field-fluid3">
<label class="inline" for="materialCode" style="margin-right:20px;width:100%;">
<span class="form_label" style="width:80px;">物料编号:</span>
<select id="materialCode" name="materialCode" style="width:70%;">
<option value="">--请选择--</option>
<c:forEach items="${lstMateriel}" var="materiel">
<option value="${materiel.materielCode}"
<c:if test="${materiel.materielCode eq materiel.materielName}">selected</c:if> >${materiel.materielCode}</option>
</c:forEach>
</select>
</label>
</li>
<script type="text/javascript">
$("#queryForm #materialCode").select2({
minimumInputLength: 0,
placeholderOption: "first",
allowClear: true,
delay: 250,
formatNoMatches: "没有结果",
formatSearching: "搜索中...",
formatAjaxError: "加载出错啦!"
});
$("#queryForm #materialCode").on("change.select2", function () {
$("#queryForm #materialCode").trigger("keyup")
}
);
</script>