select2使用最新总结,原创
Posted yuanweitao
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了select2使用最新总结,原创相关的知识,希望对你有一定的参考价值。
我直白但是很详细
$("#checkuserL").select2({ //checkuserL 为文本框或者 div的id
tags : true, //将Select2放入“标签‘mode,用户可以添加新的选择和预先存在的标签是通过提供 这个选项的属性是一个 数组 或者一个 函数 返回一个 数组的 对象 或 字符串 。 如果 字符串 而不是使用 对象 他们将有一个被转换成一个对象 id 和 文本 属性相等 的值 字符串 。
multiple : true, //Select2是否允许选择多个值 (重要)
height: ‘150px‘, //框的高度
language: "zh-CN", //中文标志
separator:",", //分隔符字符或字符串用来划定id
minimumInputLength:1, // 输入框中输入最小长度的字符触发模糊搜索功能
allowClear: true,//允许清空
SetdRowsx:10,
ajax: { //用于请求后台的ajax ,(如果访问后台时,前台可能会出现弹窗错误状态码,原因:后台后台数据错误 1:后台必须是和前台对应的(后台)JSONArray数组 [{"id":id,"text":text}]) ,很重要
url: "${ctx}/check/checkUser", //请求后台的路径
dataType: ‘json‘, //从后台接收的数据类型
delay: 250, //延迟时间 (单位毫秒)
data: function (params) {
return {
params (与后台接收数据的参数对应) : params
};
},
results: function (data) {
return {
results: data
};
},
cache: false //是否有缓存
},
formatAjaxError:function(){
layer.alert("加载失败");
},
escapeMarkup: function (markup) { return markup; },
formatSelection : function formatRepo(repo) { //选中一个后返回值
$("#checkuserL").val(repo.text);
return repo.id;
},
formatResult: function formatRepoSelection(repo) { //返回所有内容到下拉框
return repo.id; //搜索后下拉框对应的数据 (注:根据后台返回数据一一对应)
},
initSelection: function (element, callback) { // 初始化时设置默认值
var id = $(element).val()==null?"请选择":$(element).val();
var text = $("#checkuserL").val()==null?"0":$("#checkuserL").val(); //把text的值传给input
var data = { id: id, text: text};//这里是初始化的数据,你可以通过id来从服务器上获取(ajax),再装载进去
callback(data);
}
});
后台代码:
@RequestMapping("/checkUser")
public @ResponseBody JSONArray findUnit(String params) {
String st = "";
List<User> list = userService.findUserLikeName(params);
if (list != null) {
st = "[";// 构造json
for (User user : list) {
st += "{id: ‘" + user.getName() + "‘,text: ‘" + user.getId() + "‘}";
}
st += "]";
}
JSONArray json = JSONArray.parseArray(st);
return json;
}
希望能帮到更对人,踩过坑,摔醒人!!!
以上是关于select2使用最新总结,原创的主要内容,如果未能解决你的问题,请参考以下文章