下拉插件select2使用总结

1.组件说明

Select2使用示例地址：https://select2.github.io/examples.html

Select2参数文档说明：https://select2.github.io/options.html

Select2源码：https://github.com/select2/select2

使用select2首先需要引入其js及css文件

官网下载地址：https://select2.org/getting-started/installation

csdn下载地址：csdn已经上传还在审核，审核之后更新地址

2.组件使用效果

多选

设置最多只能选几个

远程搜索功能，输入文本动态后台过滤

滚动条滚动到底部自动加载剩余项

3.使用代码示例

html

使用js初始化，加载远程数据

$('#territorialId').select2({
       language:"zn-CN",
placeholder:'请选择',
allowClear: true,//可以清除选项
       ajax: {
           url: "/territorial/listSelect",
           data: function (params) {
               return {
keyWord: params.term || '', //搜索参数
page: params.page || 1, //分页参数
rows: params.pagesize || 10, //每次查询10条记录
};
           },
           processResults: function (data, params) {
               params.page = params.page || 1;
               var list = data.list;
               list = $.map(list, function (obj) {
                   obj.text = obj.text || obj.terrName;
                   return obj;
               });
               return {
                   results:list,
                   pagination: {
more: (params.page) < data.totalPage
}
               };
           }
       }
   });

1.url是请求的后台地址

2.使用后台动态加载数据时传入请求参数params

3.processResults接收后台返回数据，该回调函数返回一个对象，包含results、pagination属性，后台分也是必须返回pagination，pagination中的more用来判断是否还有下一页

4.results属性为js对象数据，数组元素中必须包含id，text属性

list = $.map(list, function (obj) {
obj.text = obj.text || obj.terrName;
return obj;
});

这段代码用来将返回数组中terrName替换为text

后台代码

@RequestMapping(value = "/listSelect")
@ResponseBody
public Object listSelect(Select2QueryParamsDto param) {
   EntityWrapper<Territorial> warp = new EntityWrapper<>();
   Wrapper<Territorial> wrapper = warp.eq("1", 1);
   if (null != param.getKeyWord() && !"".equals(param.getKeyWord().trim())) {
           wrapper.like("terr_name", param.getKeyWord());
       }
       List<Territorial> list = territorialService.selectList(wrapper);
return Select2Util.initSelectResponse(list,param);
}

后台使用mybatisplus，所以采用这种查询数据的方式，可以自己xiesql查询数据

Select2QueryParamsDto.java

public class Select2QueryParamsDto {

   private String keyWord;
   private Integer page;
   private Integer rows;
}

getter、setter方法省略

Select2Util.java

public class Select2Util {

   @SuppressWarnings("rawtypes")
   public static Map<String,Object> initSelectResponse(List list,Select2QueryParamsDto param){
       Map<String,Object> map = new HashMap<>();
       int startIndex = param.getPage().intValue() - 1;
       int endIndex = param.getPage().intValue() * param.getRows().intValue() - 1;
       double totalPage = Math.ceil((double)list.size() /(double) param.getRows().intValue());
       if(list.size() < endIndex) {
           list = list.subList(startIndex, list.size());
       }else {
           list = list.subList(startIndex, endIndex);
       }
       map.put("list", list);
       map.put("totalPage", totalPage);
       return map;
   }

}

使用方法

绑定方法，选中下拉框选项后的回调，select2应该有自己的回调，这里使用的是jquery的on方法

$("#projectId").on("change", function (e) {
       var value= $("#territorialId").select2("val");
       if(null != value && "" != value){
//do something
       }
   });

获取选中值

$("#territorialId").select2("val");

取消选中

$("#territorialId").select2("val","all");

希望能持续更新

下拉插件select2使用总结

猜你喜欢