select2如何黏贴选择

2022-03-29 14:00:43 浏览数 (2)

有时在使用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
 });
 

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

1 人点赞