下拉插件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下载地址：https://download.csdn.net/download/u012669164/11001682

select2-bootstrap.css是bootstrap风格的select2样式，应用该文件后不需要引入默认样式

• 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 warp = new EntityWrapper<>();
        Wrapper wrapper = warp.eq("1", 1);
        if (null != param.getKeyWord() && !"".equals(param.getKeyWord().trim())) {
            wrapper.like("terr_name", param.getKeyWord());
        }
        List 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 initSelectResponse(List list,Select2QueryParamsDto param){
        Map 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是在点击时加载数据，需要页面加载完就设置值就得手动添加

var option = new Option(text, id, true, true);
$("#dictCode").append(option);
$("#dictCode").trigger('change');

希望能持续更新