文档章节

select2动态查询及多选

o
 osc_odyg6b92
发布于 2018/07/13 11:05
字数 462
阅读 10
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

引入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;
     }    
}

 

  

 

o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
用vertx实现高吞吐量的站点计数器

工具:vertx,redis,mongodb,log4j 源代码地址:https://github.com/jianglibo/visitrank 先看架构图: 如果你不熟悉vertx,请先google一下。我这里将vertx当作一个容器,上面所有的圆圈要...

jianglibo
2014/04/03
3.9K
3
SQLServer实现split分割字符串到列

网上已有人实现sqlserver的split函数可将字符串分割成行,但是我们习惯了split返回数组或者列表,因此这里对其做一些改动,最终实现也许不尽如意,但是也能解决一些问题。 先贴上某大牛写的s...

cwalet
2014/05/21
9.6K
0
基于 ThinkPHP 的内容管理系统--歪酷CMS

歪酷网站管理系统(歪酷CMS)是一款基于THINKPHP框架开发的PHP+MYSQL网站建站程序,本程序实现了文章和栏目的批量动态管理,支持栏目无限分类,实现多管理员管理,程序辅助功能也基本实现了常见的文...

鲁大在线
2013/02/19
6.9K
1
开源数据访问组件--Smark.Data

Smark.Data是基于Ado.net实现的数据访问组件,提供基于强类型的查询表达式进行灵活的数据查询,统计,修改和删除等操作;采用基于条件驱动的操作模式,使数据操作更简单轻松;内部通过标准SQL...

泥水佬
2013/03/12
2.5K
0
Linux 多屏幕管理软件--XRandR

XRandR是X Rotate and Reflect Extension(改变大小与旋转扩充)的缩写,用来在命令行界面中对linux系统中的 X窗口系统的多屏幕做出一些设定的软件,能更改外接屏幕的大小、分辨率等...

匿名
2012/10/22
3K
0

没有更多内容

加载失败,请刷新页面

加载更多

Vim清除最后一个搜索突出显示 - Vim clear last search highlighting

问题: Want to improve this post? 想要改善这篇文章吗? Provide detailed answers to this question, including citations and an explanation of why your answer is correct. 提供此问题......

技术盛宴
42分钟前
13
0
原子属性和非原子属性有什么区别? - What's the difference between the atomic and nonatomic attributes?

问题: What do atomic and nonatomic mean in property declarations? 属性声明中atomic和nonatomic是什么意思? @property(nonatomic, retain) UITextField *userName;@property(atomic, ......

fyin1314
今天
7
0
马化腾每天刷 Leetcode?代码你打算写到几岁?

本文作者:o****0 前几天,一张未证真伪的截图流传,图中显示马化腾几乎每天都会在 Leetcode 上提交代码。 截图还贴出一个 Leetcode 账户地址。该地址的头像已从马化腾的照片换成腾讯 logo,...

百度开发者中心
前天
13
0
滴滴 3000+ Kylin Cube 背后的实践经验揭秘

本次分享主要有三个部分:Kylin 在滴滴的整体应用、架构的实践经验、滴滴全局字典最新版本的实现以及 Kylin 最新实时 OLAP 探索经验分享。 Kylin 在滴滴的应用&架构 Kylin 在滴滴的三类应用场...

浪尖聊大数据
昨天
9
0
ssh“权限太开放”错误 - ssh “permissions are too open” error

问题: I had a problem with my mac where I couldn't save any kind of file on the disk anymore. 我的Mac出现问题,无法再在磁盘上保存任何类型的文件。 I had to reboot OSX lion and r......

javail
今天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部