select2如何黏贴选择

来源:互联网 发布:mysql notifier 关闭 编辑:程序博客网 时间:2024/04/30 15:43

有时在使用select2插件时会遇到这种需求:一次性选择一些数据,然后根据这些数据自动选择相关项,我也遇到了这种需求并实现,这里简单讲讲我的做法:

1.首先我修改了select2的源码,增加了一个方法paste并在AllowedMethod数组中添加自定义的方法

paste:function(items,selId){
var datas = this.opts.data;
var values=[];
var max = this.opts.maximumSelectionSize;
for(var i=0;i<datas.length && values.length<max;i++){
var data=datas[i];
for(var j=0;j<items.length;j++){
var item = items[j];
var text = data.text;
text = text.trim();
text = text.substring(0,text.length-1);
if(text == item){
var sel = {};
sel.text = data.text;
sel.id = data.id;
values.push(sel);
}
}
}
if(values.length >0){
$(selId).select2('data',values);
}
},

allowedMethods = ["findHighlightableChoices","paste","val", "destroy", "opened", "open", "close", "focus", "isFocused", "container", "dropdown", "onSortStart", "onSortEnd", "enable", "disable", "readonly", "positionDropdown", "data", "search","highlight"],

2.捕获paste事件,然后把粘贴板的数据经过处理后传给自定义的paste方法,在paste方法中完成数据项的选择


//由于select2重载了select元素,真正操作都是操作的select2插件创建的元素,笔者定义的select2元素id为multiple-import-orgId,s2id_multiple-import-orgId则是select2插件创建的select元素id

$("#s2id_multiple-import-orgId").on('paste',function(e){

//
var data;
if(window.clipboardData){

//IE浏览器
data = window.clipboardData.getData('Text')
}else{

//firefox,chrome浏览器
data = e.originalEvent.clipboardData.getData("text/plain");
}
var items = data.split('、',maxOrg);    //其中、号为约定的选项间隔符
$(selId).select2('paste',items,selId);   //selId为select2插件id
});


通过上面代码,相信都已经明白了其中的原理



1 0
原创粉丝点击