码迷,mamicode.com
首页 > 其他好文 > 详细

select2

时间:2016-01-12 11:31:12      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:

.select2-container .select2-choice {  
  height: 34px;  
  line-height: 34px;  
}  
1 1.自定义 组件高度
2  在css 里面设置
3 
4 .select2-container .select2-choice {  
5   height: 34px;  
6   line-height: 34px;  
7 }  

 

1 2.自定义宽度 和 监听 change事件(coffeescript语法)
2 
3 $(#time_scope_scope_id).select2({width:200px}).on("change", (e) ->   
4        refresh_tab()  
5 )  

 

 

 

http://blog.csdn.net/remote_roamer/article/details/47732349 

select2 4.02 实现类似google搜索条的 ajax remote data功能

1,构建一个 select2 的 下拉框,
这里注意,不能用input 来构建了

1 <select id="park_code"></select>  

2,初始化成select2 对象

 $("#park_code").select2({  
        placeholder: "选择一个停车场",  
        ajax: {  
            url: "/park_seek/",  
            dataType: json,  
            delay: 500,  
            data: function (params) {  
                return {  
                    q: params.term, // search term  
                    page: params.page  
                };  
            },  
            processResults: function (data, page) {  
            // parse the results into the format expected by Select2.  
            // since we are using custom formatting functions we do not need to  
            // alter the remote JSON data  
                console.debug("ajax返回的对象是:")  
                console.debug(data.items)  
                return {  
                    results: data.items  
                };  
            },  
            cache: true  
        },  
        escapeMarkup: function (markup) {   
            console.debug(markup)  
            return markup;   
        }, // let our custom formatter work  
        minimumInputLength: 1,  //至少输入多少个字符后才会去调用ajax  
        maximumInputLength: 20, //最多能输入多少个字符后才会去调用ajax  
        minimumResultsForSearch: 1,  
        width: "260px",  
        templateResult: formatRepo,   
        templateSelection: formatRepoSelection,  
    });  
  
  
    $("#park_code").on("change",function (e){  
        can_analyse();  
    })  
/* 这里2个函数是用于查询到内容后,显示在select2的下拉框里面 */  
function formatRepo (repo) {  
    if (repo.loading) return repo.text;  
    repo.text = repo.name  
    repo.id = repo.code  
    var markup = <div class="clearfix"> +  
    <div class="col-sm-4"> + repo.code + </div> +  
    <div class="col-sm-20"> + repo.name + </div> +  
    </div>;  
  
    return markup;  
}  
  
function formatRepoSelection (repo) {  
    repo.selected = true;   
    repo.code = repo.id  
    repo.name = repo.text  
    if(repo.code == null || repo.code == ""){  
        repo.text = 请选择一个停车场  
        repo.name = repo.text  
    }  
    $("#park_name").val(repo.name);  
    console.debug(repo);  
    return repo.code ;  
}  
/* 这里2个函数是用于查询到内容后,显示在select2的下拉框里面  end */ 

3.通过其他的js函数对这个select2 进行赋值

$("#park_code").empty().append(<option id="+code+" value="+code+">+name+</option>).trigger(change);  

注意:这里要trigger 这个 change 的 事件,这样才会调用formatRepoSelection 这个方法,并且刷新UI。

 

后台提供的json对象
{
items: 
[
{
id: "02469",
code: "02469",
name: "大树路4"
},
{
id: "02470",
code: "02470",
name: "大树路2"
},
{
id: "02779",
code: "02779",
name: "大树路1"
},
{
id: "02679",
code: "02679",
name: "大树路3"
}
]
}
注意几个问题:
1.如果返回的json里面没有id。则会出现查询的对象无法选择的问题。处理方式,就是在返回的josn对象里面加入  id 这个唯一标示
相关内容http://kanpiaoxue.iteye.com/blog/2153468
2.formatRepoSelection函数中,缺省的是处理repo 对象 的 id 和 text 这2个属性,而我这里定义的json是是code 和 name,所以需要把code 和 name 复制到 id 和 text里面。否则没法显示在界面上。另外一种简单的处理方法,可以把json对象直接变成 id 和 text的结构。这样就不用定制 select2 里面的方法了。

 

select2

标签:

原文地址:http://www.cnblogs.com/8899man/p/5123413.html

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