有时在使用select2插件时会遇到这种需求:一次性选择一些数据,然后根据这些数据自动选择相关项,我也遇到了这种需求并实现,这里简单讲讲我的做法:
1.首先我修改了select2的源码,增加了一个方法paste并在AllowedMethod数组中添加自定义的方法
代码语言:javascript复制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方法中完成数据项的选择
代码语言:javascript复制//由于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
});
通过上面代码,相信都已经明白了其中的原理