select2动态查询及多选

最新推荐文章于 2023-08-10 11:26:47 发布

weixin_30527423

最新推荐文章于 2023-08-10 11:26:47 发布

阅读量327

点赞数

文章标签： java 后端 javascript ViewUI

原文链接：http://www.cnblogs.com/5588kjx/p/9303849.html

版权

引入select2.min.js和select2.css

<link rel="styleSheet" href="./plugin/select2/css/select2.css" type="text/css">
<script src="./plugin/select2/js/select2.min.js"></script>

html部分：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css"> 
</style>

</head>
<body>

      <div class="col-md-10" style="margin-top: 20px;">
            <div style="width:110%;text-align:left;color: gray;border-bottom: 2px solid #df5f4a;"><p style="font-weight: bold;
        font-size: 14px;">select2示例页面</p></div>
            <br>
        </div>


  <div  class="page-title col-md-10" style="z-index:-1;margin-top: 5px;" placeholder>
     <span>单选</span>
  </div>
   
<div  class="col-md-10">
   <select style="width:70%;overflow:visible;" class="js-data-example-ajax" placeholder="Search W3School">  
   </select>
</div>

<div class="page-title col-md-10" style="z-index:-1">
     <span>多选</span>
  </div>

<div  class="col-md-10">
   <select style="width:70%;overflow:visible;" class="js-data-example-ajax" multiple>  
   </select>
</div>

</body>

<script type="text/javascript">

</script>
</html>

　核心代码：

$("select.js-data-example-ajax").each(
        function() {
            var $this = $(this);
            $this.select2({
                placeholder: "请输入关键字",
                language : "zh-CN",// 指定语言为中文，国际化才起效
                allowClear: true,
                ajax : {
                    url :url,
                    dataType : 'json',
                    delay : 250,// 延迟显示
                    data : function(params) {
                        return {
                            id : params.term, // 搜索框内输入的内容，传递到Java后端的parameter为username
                            page : params.page,// 第几页，分页哦
                            rows : 10// 每页显示多少行
                        };
                    },
                    beforeSend: function(request) {
                         request.setRequestHeader("Authorization","Arch6WithCloud "+localStorage.getItem("JSESSIONID"));
                    },
                    // 分页
                    processResults : function(data, params) {
                        params.page = params.page || 1;

                        return {
                            results : data.data,// 后台返回的数据集
                            pagination : {
                                more : params.page < data.total// 总页数为10，那么1-9页的时候都可以下拉刷新
                            }
                        };
                    },
                    cache : false
                },
                escapeMarkup : function(markup) {
                    return markup;
                }, // let our custom formatter work
                minimumInputLength : 0,// 最少输入一个字符才开始检索
                templateResult : function(repo) {// 显示的结果集格式，这里需要自己写css样式，可参照demo
                    // 正在检索
                    if (repo.loading)
                        return repo.text;

                    var markup = "<table class='select2-result-repository clearfix'>" 
                    + "<tr>"
                    + "<td style='word-break:break-all;' width='300px'>" + repo.code + "</td>"
                    + "<td width='400px' align='center' >" + repo.value + "</td>"
                    + "</tr>"
                    + "</table>"
                    ;

                    return markup;
                }, 
                templateSelection : function(repo) {
                    if(repo.code==undefined||repo.value==undefined){
                        return "请输入关键字";  
                    }else{
                         return repo.code||repo.value;
                    }
                }// 列表中选择某一项后显示到文本框的内容
             });

             });

　controller:

@RestController
@RequestMapping("/sdd/code")
public class StuApi extends BaseApi {
    @Autowired
    StuService userService;     
        
    @RequestMapping(value = "/queryList")
    @ResponseBody
    public ApiResponse queryList(HttpServletRequest request) throws IOException {
        String uid=request.getParameter("id");
        List<SddCode> users = new ArrayList<SddCode>();
        users = sddCodeService.queryList(uid);
        
        ApiResponse response = new ApiResponse();
        
        response.setData(users);
        
        return response;
     }    
}