select2，bootstrap冲突问题

这个其实还好，官方文档有说明 https://select2.org/troubleshooting/common-problems

也可以这样用


.select2-drop {
        z-index: 10050 !important;
    }
 
    .select2-search-choice-close {
        margin-top: 0 !important;
        right: 2px !important;
        min-height: 10px;
    }
 
        .select2-search-choice-close:before {
            color: black !important;
        }
    /*防止select2不会自动失去焦点*/
    .select2-container {
        z-index: 16000 !important;
    }
 
    .select2-drop-mask {
        z-index: 15990 !important;
    }
 
    .select2-drop-active {
        z-index: 15995 !important;
    }

或者增加

select2.bootstrap.css 适配

minimumInputLength

这个是最小输入数，达到这个才会开始搜索动作. 看文档不仔细。略急躁.

当数字大于0的时候，必须输入达到字符数量才会调用后台，

而数字为0 的时候，有按键就会触发.

ajax 数据获取

这个折腾了很久，不是不爱用jquery.ajax，只是想说爱你太难。。

虽然使用ajava 手动加载出来了，但是样式/事件响应之类的都会有影响，最后弃用。

选择了select2内置的ajax的，

$(elemnt).select2({
		dropdownParent : $("#myModal"),
		placeholder : "选择属性",
		minimumInputLength : 0,
		maximumSelectionLength:1,
		theme : "bootstrap",
		multiple:false,
		language : {
			errorLoading : function() {
				return "无法载入结果。"
			},
			inputTooLong : function(e) {
				var t = e.input.length - e.maximum, n = "请删除"
						+ t + "个字符";
				return n
			},
			inputTooShort : function(e) {
				var t = e.minimum - e.input.length, n = "请再输入至少"
						+ t + "个字符";
				return n
			},
			loadingMore : function() {
				return "载入更多结果…"
			},
			maximumSelected : function(e) {
				var t ="";// "最多只能选择" + e.maximum + "个";
				return t
			},
			noResults : function() {
				return "未找到结果"
			},
			searching : function() {
				return "搜索中…"
			}

		},

		ajax : {
			type : "post",
			url : "/manager/building/buildingList",
			dataType : "json",
			data : function(params) {

				var page=params.page||0;
				
				var query = {
					name : params.term,
					pagenum: page,
					
					pageSize:10,
			
				}

				// Query parameters will be ?search=[term]&type=public
				return query;
			},

			processResults : function(data,params) {
				var selectdatas = [];
			

//添加第一个属性
if(typeof(params.page)=='undefined')
							params.page=1;
						
						if(params.page==1)
						selectdatas.push({ id :
							  -1, text : '全部' });



				$.each(data.rows, function(index, item) {
					selectdatas.push({
						id : item.id,
						text : item.name
					});
				});
				
				

				return {
					results : selectdatas,
					pagination : {
						more :  (params.page * 10>= data.total)?false:true
					}
				};
			},
		},

		templateResult : formatRepo,
		escapeMarkup : function(markup) {
			return markup;
		}, // let our custom formatter work
		templateSelection: function (data, container) {
			    // Add custom attributes to the <option> tag for the selected option
			    //$(data.element).attr('data-custom-attribute', data.customValue);
			
			   // $(container).parents("tr").find(".attr_id").val(data.id);
			    return data.text;
		  },
	});


function formatRepo (repo) {
  if (repo.loading) {
    return repo.text;
  }

  var markup = repo.text;

  if (repo.id==-1) {
    markup = '<button type="button "  style=" width: 100%;" class=" btn btn-danger btn-warning " data-dismiss="modal ">'+  repo.text  +'</button>';
  }

  return markup;
}

真是用一次坑一次，不过就是好用。。

18/12/12又发现一个坑。

js死活不进ajax请求的代码，发现原来是页面上写了，一个默认的option,

这样貌似，select2直接就认为数据是页面上的数据了。。。然后就不加载ajax JS了。。。

好吧，删掉option,写个空的select!

 <select class="form-control txt-short in-line selectdist " id="q_building" >
					  <option value="">请选择</option>
</select>

然后发现还有个需求，两个select2联动，选择第一个后需要刷新第二个的数据源

如下，第一个选择后，销毁第二个，重新初始化，不然的话，第二个的选择数据源不会刷新


function destorySelectBuildingquery(){
	$("#q_building").select2().val(null).trigger("change");
	$("#q_building").select2("destroy");
     $("#q_building").html("");//最后直接清空
}
function initSelectBuildingquery(){
	$("#q_building").select2({

要是非要用jquery的ajax的那么就是老老实实的看文档，看仔细!..

Preselecting options in an remotely-sourced (AJAX) Select2

对每一个选项都需要这么来一遍。。样式都会有影响.。。

   var option = new Option(response.name, response.id, true, true);
		    $(curselect2).append(option).trigger('change');

		    // manually trigger the `select2:select` event
		    $(curselect2).trigger({
		        type: 'select2:select',
		        params: {
		            data: {text:response.name,id:response.id}
		        }
		    });

最坑爹的就是选中了。

前面搞了半天，最后这里又栽跟头了。。。

搜索出来的一些方法，如下下面的，对于这种动态加上的选项都不起作用.

select2().val('').trigger('change');
select2('val','');

后面还是要在官网找解决呢.

既然数据都是ajax取出来的，新添加的数据要选中，其实跟上面jquery.ajax添加选项是一样一样的。。。

把需要选中的选项手动加进去..不管select2.ajax里面是否有这个选项...哎。

     var option = new Option(response.name, response.id, true, true);
		    $(curselect2).append(option).trigger('change');

		    // manually trigger the `select2:select` event
		    $(curselect2).trigger({
		        type: 'select2:select',
		        params: {
		            data: {text:response.name,id:response.id}
		        }
		    });

好吧，遇到这种官方问题了，不行就照着例子来一遍吧。。。- -！

select2显示额外属性

初始化赋值给attr  
var option = new Option(name, item.lockId, true, true);
								   $(option).attr("imei",item.lockIMei);
								    $("#st_lock").append(option).trigger('change');

							
								    $("#st_lock").trigger({
								        type: 'select2:select',
								        params: {
								            data: {text:name,id:item.lockId,imei:item.lockIMei}
								        }
								    });



select2从attr里面取值
templateSelection : function(data, container) {
					
					var id=data.imei;
					if(typeof(data.imei)=='undefined')
						id=$(data.element).attr("imei");
					
					var html = ""
						+ data.text ;
					if(id)
						html = ""
							+ data.text+"&nbsp;&nbsp;("+ id+") ";
						

					// $(container).parents("tr").find(".attr_id").val(data.id);
					return html;
				},

2019-03-14 15:03:21

0 赞赏