码迷,mamicode.com
首页 > Web开发 > 详细

Select2插件ajax方式加载数据并刷新页面数据回显

时间:2019-05-10 16:37:14      阅读:687      评论:0      收藏:0      [点我收藏+]

标签:注意   arc   ajax   多少   刷新   需要   优化   默认   select2   

今天在优化项目当中,有个要在下拉框中搜索数据的需求;最后选择使用selec2进行开发:

官网:http://select2.github.io/

演示:技术图片

准备工作:

  文件需要引入select2.full.js、select2.min.css(4.0.1版本)和jquery.1.8.3及以上

       注意:最新版本的select2如果引用的jquery版本较低的话,某些功能无法正常使用。

HTML代码

<select id="c01-select" class="select2" name="search" style="width:200px"></select>

数据要求

var data = [{ id: 0, text: ‘enhancement‘ }, { id: 1, text: ‘bug‘ }, { id: 2, text: ‘duplicate‘ }, { id: 3, text: ‘invalid‘ }, { id: 4, text: ‘wontfix‘ }];

JS代码

$(function () {
            var select2 = $("#c01-select").select2({
                 ajax: {
                 url: "URL",
                 dataType: json,
                 delay: 250,
                 data: function (params) {
                     return { eps400: params.term };
                 },
                 processResults: function (data) {
                     return {
                            results: data  //必须赋值给results并且必须返回一个obj,否则会报错;
                          };
                 },
                 cache: true
                 },
                 escapeMarkup: function (markup) { return markup; }, 
                 minimumInputLength: 1,
                 placeholder: 请选择,
            })

      //用于数据回显
var search = "${param.search}";//后台搜索或者编辑返回的数据 if(‘‘ != search){ $("#c01-select").append(new Option(search, search, false, true));//第一个参数时id,第二个参数是text $("#c01-select").trigger("change"); } })

说明:

     1.q: params.term 查询参数(params.term表示输入框中内容,q发生到服务器的参数名;所以这里你可以添加自定义参数,如:stype:‘person‘)

     2.processResults中results: data返回数据(返回最终数据给results,如果我的数据在data.res下,则返回data.res。这个与服务器返回json有关)

     3.minimumInputLength 最小需要输入多少个字符才进行查询,与之相关的maximumSelectionLength表示最大输入限制。

     4.escapeMarkup字符转义处理

     5.templateResult返回结果回调function formatRepo(repo){return repo.text},这样就可以将返回结果的的text显示到下拉框里,当然你可以return repo.text+"1";等

     6.templateSelection选中项回调function formatRepoSelection(repo){return repo.text}

     7.关于返回的 json的格式:select2默认json格式为[{id:1,text:‘text‘},{id:2,text:‘text‘}],新版严格要求这样的格式,当然你可以添加列,如:[{id:1,text:‘text‘,name:‘liu‘}]

Select2插件ajax方式加载数据并刷新页面数据回显

标签:注意   arc   ajax   多少   刷新   需要   优化   默认   select2   

原文地址:https://www.cnblogs.com/hhwww/p/10844963.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!