1. 技术文章
  2. How to add selectall using dropdownadapter on select2 v4

How to add selectall using dropdownadapter on select2 v4

由 只愿长相守 提交于 2021-02-19 08:47:06

问题


I am not using require and trying to implement this. 

$(".js-example-data-ajax").select2({
        ajax: {
            //url: "https://api.github.com/search/repositories",
            url: "<?=BASE_URL ?>api/corporate-performance-dashboard/get-customers",
            dataType: 'json',
            type : 'POST',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term, // search term
                    page: params.page
                };
            },
            processResults: function (data, params) {
                // 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, except to indicate that infinite
                // scrolling can be used
                var dbData = [];
                //console.log(dbData);
                if(data.data != null){
                    for(i=0;i<data.data.length;i++){
                        //console.log(data.data[i].GROUP_NAME);
                        dbData[i] = {id: data.data[i].GROUP_NAME_ID,full_name:data.data[i].GROUP_NAME, text:data.data[i].GROUP_NAME };
                        //console.log(dbData[i]);
                    }

                }
                //console.log(dbData);
                params.page = params.page || 1;
                //delete dbData[0];

                return {
                    results: dbData,
                    pagination: {
                        more: (params.page * 30) < dbData.length
                    }
                };
            },
            cache: true
        },
        multiple: true,
        tags: true,
        escapeMarkup: function (markup) { return markup; },
        minimumInputLength: 3,
        templateResult: formatRepo,
        templateSelection: formatRepoSelection,
        closeOnSelect: false,
        dropdownAdapter: Utils.Decorate(
                  Utils.Decorate(
                    Dropdown,
                    AttachBody
                  ),
                  SelectAll
                ),
    }).on('change', function() {
        var $selected = $(this).find('option:selected');
        var $container = $('.js-example-tags-container');

        var $list = $('<ul>');
        $selected.each(function(k, v) {
            var $li = $('<li class="tag-selected"><a class="destroy-tag-selected">x</a>' + $(v).text() + '</li>');
            $li.children('a.destroy-tag-selected')
                .off('click.select2-copy')
                .on('click.select2-copy', function(e) {
                    var $opt = $(this).data('select2-opt');
                    $opt.attr('selected', false);
                    $opt.parents('select').trigger('change');
            }).data('select2-opt', $(v));
            $list.append($li);
        });
        $container.html('').append($list);
    }).trigger('change');

My code seems to hang on Utils, it is not defined. I am using the select2.full.js.

UPDATE

How can I display the select all only when there is data?

var Utils=$.fn.select2.amd.require('select2/utils');
var Dropdown=$.fn.select2.amd.require('select2/dropdown');
var AttachBody=$.fn.select2.amd.require('select2/dropdown/attachBody');

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

	      var markup = "<div class='select2-result-repository clearfix'>" +
	        "<div class='select2-result-repository__avatar'></div>" +
	        "<div class='select2-result-repository__meta'>" +
	          "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

	      if (repo.description) {
	        markup += "<div class='select2-result-repository__description'>" + repo.full_name + "</div>";
	      }

	      markup += "<div class='select2-result-repository__statistics'>" +
	        //"<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
	        //"<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
	       // "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
	      "</div>" +
	      "</div></div>";

	      return markup;
		}

	function formatRepoSelection (repo) {
		return repo.full_name || repo.text;
	}

	function formatResult (result) {

		if (result.loading) return "Searching...";
	}

	function SelectAll() { }

	SelectAll.prototype.render = function (decorated) {
		var $rendered = decorated.call(this);
      	var self = this;

      	var $selectAll = $(
        	'<button type="button">Select All</button>'
      	);

      	$rendered.find('.select2-dropdown').prepend($selectAll);

      	$selectAll.on('click', function (e) {
	        var $results = $rendered.find('.select2-results__option[aria-selected=false]');
	        
	        // Get all results that aren't selected
	        $results.each(function () {
				var $result = $(this);
	          
				// Get the data object for it
	          	var data = $result.data('data');
	          
	          	// Trigger the select event
	          	self.trigger('select', {
	            	data: data
	         	});
	        });
	        
			self.trigger('close');
		});
      
		return $rendered;
	};
	    
	$(".js-example-data-ajax").select2({
		ajax: {
			url: "https://api.github.com/search/repositories",
	       // url: "../../api/corporate-performance-dashboard/get-customers",
	        dataType: 'json',
	        type : 'POST',
	        delay: 250,
	        data: function (params) {
				return {
	            	q: params.term, // search term
	            	page: params.page
				};
	        },
	        processResults: function (data, params) {
				// 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, except to indicate that infinite
				// scrolling can be used

				params.page = params.page || 1;
				//delete dbData[0];
              
              var jsonD = [{"error":false,"message":"","data":[{"GROUP_NAME_ID":"16323","GROUP_NAME":"AARHUS UNITED UK LTD (OneNet Core)"},{"GROUP_NAME_ID":"44276","GROUP_NAME":"AMNESTY INTERNATIONAL UNITED KINGDOM_950138123"},{"GROUP_NAME_ID":"40612","GROUP_NAME":"BAIN & COMPANY INC. UNITED KINGDOM_925001385"},{"GROUP_NAME_ID":"3026","GROUP_NAME":"BECKMAN COULTER UNITED KINGDOM LTD_900028226"},{"GROUP_NAME_ID":"40989","GROUP_NAME":"BOEING  UNITED KINGDOM LIMITED_925001540"},{"GROUP_NAME_ID":"43804","GROUP_NAME":"CONTITECH UNITED KINGDOM_925002897"},{"GROUP_NAME_ID":"40454","GROUP_NAME":"CPM UNITED KINGDON LIMITED_925001355"},{"GROUP_NAME_ID":"2316","GROUP_NAME":"CSM (UNITED KINGDOM) LTD_925000567"},{"GROUP_NAME_ID":"2310","GROUP_NAME":"CUNNINGHAM LINDSEY UNITED KINGDOM_900002099"},{"GROUP_NAME_ID":"33735","GROUP_NAME":"EMBASSEY OF THE UNITED ARAB EMIRATES (OneNet Core)"},{"GROUP_NAME_ID":"3132","GROUP_NAME":"EUROMEDIC UNITED KINGDOM  LTD_911460356"},{"GROUP_NAME_ID":"3379","GROUP_NAME":"MCKINSEY & CO INC. UNITED KINGDOM_925000105"},{"GROUP_NAME_ID":"13699","GROUP_NAME":"OXFORD UNITED FOOTBALL CLUB LTD (OneNet Core)"},{"GROUP_NAME_ID":"4584","GROUP_NAME":"PUMA UNITED KINGDOM LTD_950005472"},{"GROUP_NAME_ID":"3267","GROUP_NAME":"ROYAL UNITED HOSPITAL BATH - CATALIST_900223059"},{"GROUP_NAME_ID":"1436","GROUP_NAME":"S. & L. UNITED STORAGE SYSTEMS LTD_950031834"},{"GROUP_NAME_ID":"17550","GROUP_NAME":"SER SOLUTIONS UNITED KINGDOM LTD (OneNet Core)"},{"GROUP_NAME_ID":"17630","GROUP_NAME":"SGS UNITED KINGDOM LTD_925000665"},{"GROUP_NAME_ID":"42205","GROUP_NAME":"UNITED AGENTS LIMITED_925002404"},{"GROUP_NAME_ID":"40001","GROUP_NAME":"UNITED AGENTS LLP_911430196"},{"GROUP_NAME_ID":"2549","GROUP_NAME":"UNITED AGENTS LTD_911430196"},{"GROUP_NAME_ID":"2548","GROUP_NAME":"UNITED AGRI PRODUCTS  LIMITED - GPRS_900182496"},{"GROUP_NAME_ID":"13327","GROUP_NAME":"UNITED ARAB EMIRATES EMBASSY (OneNet Core)"},{"GROUP_NAME_ID":"4461","GROUP_NAME":"UNITED BUSINESS MEDIA GROUP LTD_900155663"},{"GROUP_NAME_ID":"3842","GROUP_NAME":"UNITED BUSINESS MEDIA PLC - GPRS_900155663"},{"GROUP_NAME_ID":"24535","GROUP_NAME":"UNITED CARPETS LTD_910766502"},{"GROUP_NAME_ID":"41498","GROUP_NAME":"UNITED CAST BAR (UK) LTD_950105891"},{"GROUP_NAME_ID":"43894","GROUP_NAME":"UNITED DAIRY FARMERS LIMITED_925003162"},{"GROUP_NAME_ID":"723","GROUP_NAME":"UNITED DAIRY FARMERS_910115981"},{"GROUP_NAME_ID":"40800","GROUP_NAME":"UNITED DRUG PUBLIC LIMITED COMPANY_925001555"},{"GROUP_NAME_ID":"113","GROUP_NAME":"UNITED LINCOLNSHIRE HOSPITALS CATALIST_900219353"},{"GROUP_NAME_ID":"2547","GROUP_NAME":"UNITED RESPONSE - CATALIST_900254800"},{"GROUP_NAME_ID":"24366","GROUP_NAME":"UNITED STATES EMBASSY_911415962"},{"GROUP_NAME_ID":"2546","GROUP_NAME":"UNITED THERAPEUTICS EUROPE LTD_911232907"},{"GROUP_NAME_ID":"112","GROUP_NAME":"UNITED UTILITIES GROUP PLC_925000155"},{"GROUP_NAME_ID":"40803","GROUP_NAME":"UNITED UTILITY GROUP PLC - M2M_925000941"},{"GROUP_NAME_ID":"3841","GROUP_NAME":"UNITED WELSH HOUSING ASSOC. - CATALIST_900275753"},{"GROUP_NAME_ID":"3176","GROUP_NAME":"UNITEDHEALTH UK LTD_911169045"},{"GROUP_NAME_ID":"4454","GROUP_NAME":"VANDERLANDE INDUSTRIES UNITED KINGDOM LT_911405044"},{"GROUP_NAME_ID":"687","GROUP_NAME":"WMF UNITED KINGDOM LIMITED_910383186"},{"GROUP_NAME_ID":"2506","GROUP_NAME":"WPS UNITED KINGDOM LTD_910465482"},{"GROUP_NAME_ID":"40186","GROUP_NAME":"YOKOGAWA UNITED KINGDOM LTD_950099226"}],"dbdataCount":null}];
console.log(data);
              var dbData = [];
	          for(i=0;i<jsonD[0].data.length;i++){
		          dbData[i] = {id: jsonD[0].data[i].GROUP_NAME_ID, full_name:jsonD[0].data[i].GROUP_NAME};
	          }
              console.log(jsonD);
				
				return {
					results: dbData,
					pagination: {
						more: (params.page * 30) < dbData.length
					}
				};
	        },
	        cache: true
		},
		multiple: true,
		//tags: true,
		escapeMarkup: function (markup) { return markup; },
		minimumInputLength: 3,
		templateResult: formatRepo,
		templateSelection: formatRepoSelection,
		closeOnSelect: false,
		dropdownAdapter: Utils.Decorate(
				Utils.Decorate(
			        Dropdown,
			        AttachBody
			      ),
			      SelectAll
			    ),
	}).on('change', function() {
		//if($(this).text())
	    var $selected = $(this).find('option:selected');
	    var $container = $('.js-example-tags-container');

	    var $list = $('<ul>');
	    $selected.each(function(k, v) {
			var $li = $('<li class="tag-selected"><a class="destroy-tag-selected">x</a>' + $(v).text() + '</li>');
			$li.children('a.destroy-tag-selected')
	        	.off('click.select2-copy')
	        	.on('click.select2-copy', function(e) {
	          		var $opt = $(this).data('select2-opt');
					$opt.attr('selected', false);
	          		$opt.parents('select').trigger('change');
	        }).data('select2-opt', $(v));
	      	$list.append($li);
		});
	    $container.html('').append($list);
	}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>

<div class="container">
<div class="border-radius">
		<div class="col-md-6 ">
			<fieldset class="border-radius white-bg">
			<legend class="border-radius">Search Customer/s</legend>
				<div class="col-md-10">
					<select class="js-example-data-ajax" style="width:100%">
					  
					</select>
				</div>
				<div class="col-md-2">
					<button id="search_customers" type="button" class="btn btn-primary">Go</button>
				</div>
            <div class="js-example-tags-container">
							
						</div>
	
			</fieldset>
			
		</div>
		<!-- //.span6 -->

		<div class="col-md-6 ">
			<fieldset class="border-radius white-bg">
			<legend class="border-radius">Search Customer/s</legend>
				<div class="col-md-10">
					
				</div>
				<div class="col-md-2">
					<button type="button" class="btn btn-primary">Go</button>
				</div>
              
              <div>display select in list here</div>
	
			</fieldset>
			
		</div>
		<!-- //.span6 -->
	</div>
	<!-- //.row-fluid -->
  </div>

回答1:


You should use require to load components into local variables. If you insist not to use require, maybe you can try this out:

var Utils=$.fn.select2.amd.require('select2/utils');
var Dropdown=$.fn.select2.amd.require('select2/dropdown');
var AttachBody=$.fn.select2.amd.require('select2/dropdown/attachBody');

UPDATE: The simplest way is to set a listener to check if there has options inside the select tag, if not, add a style on that button let it display:none



来源：https://stackoverflow.com/questions/35799854/how-to-add-selectall-using-dropdownadapter-on-select2-v4

标签
jquery
require
jquery-select2-4
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!