关于jQuery插件select2的使用(数据回显)
最近在项目中需要做一个所属区—>委办局—>初审人员,复审人员 的三级联动并且下拉框可多选的功能,初步使用select2插件,还是挺好用的。
在此以修改数据 select 页面回显为例:
后台controller:
/**
* 查找审核人员
*/
@ResponseBody
@RequestMapping(value = "findUser")
public String findUser(String id){
String listString=null;
String jsonString1=null;
String jsonString2=null;
List list1 = new ArrayList<>();
List list2 = new ArrayList<>();
ServiceItem queryUserById = officeDao.queryUserById(id);
if (queryUserById!=null) {
String id2 = queryUserById.getFirstAudit().getId();
String id3 = queryUserById.getReview().getId();
String s = id2;
String[] split = s.split(",");
for (int i = 0; i < split.length; i++) {
User queryNameById = officeDao.queryNameById(split[i]);
HashMap<String, String> hashMap = new HashMap<>();
hashMap.put("id",queryNameById.getId());
hashMap.put("name",queryNameById.getName());
list1.add(hashMap);
}
String ss = id3;
String[] splits = ss.split(",");
for (int i = 0; i < splits.length; i++) {
User queryNameById = officeDao.queryNameById(splits[i]);
HashMap<String, String> hashMap = new HashMap<>();
hashMap.put("id",queryNameById.getId());
hashMap.put("name",queryNameById.getName());
list2.add(hashMap);
}
jsonString1 = JSON.toJSONString(list1);
jsonString2 = JSON.toJSONString(list2);
listString=jsonString1+"_split_"+jsonString2;
}
return listString;
}
前台在页面初始化时发送ajax请求:
//页面初始化时发送请求拿到审核人员数据
$(document).ready(function(){
$("#opt1").select2({
placeholder: '选择审核人员'
});
$("#opt2").select2({
placeholder: '选择审核人员'
});
var id = $("#p1").attr("value");
$.ajax({
type: 'GET',
url: '${ctx}/item/serviceItem/findUser?id='+id,
dataType: 'text',
success: function(data){
//由于需要的是两个下拉框的回显,所以后台在传的时候用字符串分割开了
var arr = data.split("_split_");
var arr1 = $.parseJSON(arr[0]);
var arr2 = $.parseJSON(arr[1]);
echoSelect2("#opt1",arr1);
echoSelect2("#opt2",arr2);
},
error :function(e) {
console.info("error");
}
});
});
//回显数据
function echoSelect2(dom,value){
$.each(value,function(index,value){
$(dom).append(new Option(value.name, value.id, false, true));
});
$(dom).trigger("change");
}