selectM 再次加上了全选、清除按钮

1、上次加上了callback:null  事件,null 可以设为一个方法名称,默认会返回多选值。

2、这次变更了一下,null也可以指定参数如:callback:"editWin('10086')",调用editWin时,会传递固定参数值10086过去。

3、在事件上加上了全选、清空按钮

此次有变更的方法:

this.createOption = function(){
				var o=this,c=o.config,f=c.field,d = c.data;
				var s = c.selected;
				$E = $(c.elem);
				var tips = c.tips.replace('{max}',c.max);
				var inputName = c.name=='' ? c.elem.replace('#','').replace('.','') : c.name;
				var verify = c.verify=='' ? '' : 'lay-verify="'+c.verify+'" ';
				var html = '';
				html +=	'<div class="layui-unselect layui-form-select">';
				html +=			'<div class="layui-select-title">';
				html +=				'<input '+verify+'name="'+inputName+'" type="text" readonly="" class="layui-input layui-unselect">';
				html +=			'</div>';
				html +=			'<div class="layui-input multiple">';
				html +=			'</div>';
				html +=			'<dl class="layui-anim layui-anim-upbit">';
				html += '<dd lay-value="" class="layui-select-tips layui-disabled">' + tips + '</dd>';
				//begin add by lys 2023/6/22
				html += '<dd lay-value="" class="layui-select-tips layui-disabled"><input type="button" value="全选" class="layui-btn layui-btn-xs layui-btn-normal layui-btn-radius" />&nbsp;<input type="button" value="清空" class="layui-btn layui-btn-xs layui-btn-normal layui-btn-radius" /></dd>';
				//end add by lys 2023/6/22
				for(var i=0;i<d.length;i++){
					var disabled1='',disabled2='';
					if(d[i][f.statusName]==0){
						o.disabledIndex[d[i][f.idName]] = d[i][f.titleName];
						disabled1 = d[i][f.statusName]==0 ? 'layui-disabled' : '';
						disabled2 = d[i][f.statusName]==0 ? ' layui-checkbox-disbaled layui-disabled' : '';						
					}
					html +='<dd lay-value="'+d[i][f.idName]+'" class="'+disabled1+'">';
					html +=		'<div class="layui-unselect layui-form-checkbox'+disabled2+'" lay-skin="primary">';
					html +=			'<span>'+d[i][f.titleName]+'</span><i class="layui-icon">&#xe605;</i>';
					html +=		'</div>';
					html +='</dd>';
				}
				html +=			'</dl>';
				html +=		'</div>';				
				$E.html(html);
		}




//全选,清空
	  $E.on('click', 'input', function (e) {
		  var _dd = $(this);
		  if (_dd.hasClass('layui-disabled')) {
			  return false;
		  }
		  if (_dd) {
			 if (_dd[0].value && _dd[0].value == "全选") {
				 $(c.elem).find('dd').addClass('layui-this');
				 $(c.elem).find('.layui-select-tips').removeClass('layui-this'); 
				 $(c.elem).find('.layui-form-checkbox').addClass('layui-form-checked');
			 }
			 else if (_dd[0].value && _dd[0].value == "清空") {
				 $(c.elem).find('dd').removeClass('layui-this');
				 $(c.elem).find('.layui-form-checkbox').removeClass('layui-form-checked');
			 }
		  }
		  o.setSelected();
	  });

 selectM 全文

/*
* @version: 2.0
* @Author:  tomato
* @Date:    2018-5-5 11:29:57
* @Last Modified by:   tomato
* @Last Modified time: 2018-5-26 18:08:43
*/
//多选下拉框
layui.define(['jquery', 'layer'], function(exports){
	var MOD_NAME = 'selectM';
	var $ = layui.jquery,layer=layui.layer;
	var obj = function(config){
		this.disabledIndex =[];
		//当前选中的值名数据
		this.selected = [];
		//当前选中的值
		this.values =[];
		//当前选中的名称
		this.names =[];
		
		//初始化设置参数
		this.config = {
			//选择器id或class
			elem: '',
			//候选项数据[{id:"1",name:"名称1",status:0},{id:"2",name:"名称2",status:1}]
			data: [],			
	
			//默认选中值
			selected: [],

			//空值项提示,支持将{max}替换为max			
			tips: '请选择 最多 {max} 个',				

			//最多选中个数,默认5
			max : 5,
			
			//选择框宽度
			width:null,
			
			//值验证,与lay-verify一致
			verify: '',	

			//input的name 不设置与选择器相同(去#.)
			name: '',
			
			//值的分隔符
			delimiter: ',',
			
			//候选项数据的键名 status=0为禁用状态
			field: { idName: 'id', titleName: 'name', statusName: 'status' }

			,callback: null
		}
		this.config = $.extend(this.config,config);
		//创建选项元素
		this.createOption = function(){
				var o=this,c=o.config,f=c.field,d = c.data;
				var s = c.selected;
				$E = $(c.elem);
				var tips = c.tips.replace('{max}',c.max);
				var inputName = c.name=='' ? c.elem.replace('#','').replace('.','') : c.name;
				var verify = c.verify=='' ? '' : 'lay-verify="'+c.verify+'" ';
				var html = '';
				html +=	'<div class="layui-unselect layui-form-select">';
				html +=			'<div class="layui-select-title">';
				html +=				'<input '+verify+'name="'+inputName+'" type="text" readonly="" class="layui-input layui-unselect">';
				html +=			'</div>';
				html +=			'<div class="layui-input multiple">';
				html +=			'</div>';
				html +=			'<dl class="layui-anim layui-anim-upbit">';
				html += '<dd lay-value="" class="layui-select-tips layui-disabled">' + tips + '</dd>';
				//begin add by lys 2023/6/22
				html += '<dd lay-value="" class="layui-select-tips layui-disabled"><input type="button" value="全选" class="layui-btn layui-btn-xs layui-btn-normal layui-btn-radius" />&nbsp;<input type="button" value="清空" class="layui-btn layui-btn-xs layui-btn-normal layui-btn-radius" /></dd>';
				//end add by lys 2023/6/22
				for(var i=0;i<d.length;i++){
					var disabled1='',disabled2='';
					if(d[i][f.statusName]==0){
						o.disabledIndex[d[i][f.idName]] = d[i][f.titleName];
						disabled1 = d[i][f.statusName]==0 ? 'layui-disabled' : '';
						disabled2 = d[i][f.statusName]==0 ? ' layui-checkbox-disbaled layui-disabled' : '';						
					}
					html +='<dd lay-value="'+d[i][f.idName]+'" class="'+disabled1+'">';
					html +=		'<div class="layui-unselect layui-form-checkbox'+disabled2+'" lay-skin="primary">';
					html +=			'<span>'+d[i][f.titleName]+'</span><i class="layui-icon">&#xe605;</i>';
					html +=		'</div>';
					html +='</dd>';
				}
				html +=			'</dl>';
				html +=		'</div>';				
				$E.html(html);
		}

		//设置选中值
		this.set = function(selected){
			var o=this,c=o.config;
			var s = typeof selected=='undefined' ? c.selected : selected;
			$E = $(c.elem);
			$E.find('.layui-form-checkbox').removeClass('layui-form-checked');			
			$E.find('dd').removeClass('layui-this');
			//为默认选中值添加类名
			var max = s.length>c.max ? c.max : s.length;
			for(var i=0;i<max;i++){
				if(s[i] && !o.disabledIndex.hasOwnProperty(s[i])){
					$E.find('dd[lay-value='+s[i]+']').addClass('layui-this');	
				}
			}
			$E.find('dd.layui-this').each(function(){
				$(this).find('div').addClass('layui-form-checked');
			});	
			o.setSelected(selected);	
		}
	
		//设置选中值 每次点击操作后执行
		this.setSelected = function(first){
			var o=this,c=o.config,f=c.field;
			$E = $(c.elem);
			var values=[],names=[],selected = [],spans = [];
			var items = $E.find('dd.layui-this');
			if(items.length==0){
				var tips = c.tips.replace('{max}',c.max);
				spans.push('<span class="tips">'+tips+'</span>');
			}
			else{
				items.each(function(){
					$this = $(this);
					var item ={};
					var v = $this.attr('lay-value');
					var n = $this.find('span').text();
					item[f.idName] = v;
					item[f.titleName] = n;
					values.push(v);
					names.push(n);
					spans.push('<a href="javascript:;"><span lay-value="'+v+'">'+n+'</span><i class="layui-icon">&#x1006;</i></a>');
					selected.push(item);
				});
			}
			spans.push('<i class="layui-edge" style="pointer-events: none;"></i>');
			$E.find('.multiple').html(spans.join(''));				
			$E.find('.layui-select-title').find('input').each(function(){
				if(typeof first=='undefined'){
					this.defaultValue = values.join(c.delimiter);
				}
				this.value = values.join(c.delimiter);
			});
			
			var h = $E.find('.multiple').height()+14;
			$E.find('.layui-form-select dl').css('top',h+'px');
			o.values = values, o.names = names, o.selected = selected;			
		}
		//ajax方式获取候选数据
		this.getData = function(url){
			var d;
			$.ajax({
				url:url,
				dataType:'json',
				async:false,
				success:function(json){
					d=json;
				},
				error: function(){
					console.error(MOD_NAME+' hint:候选数据ajax请求错误 ');
					d = false;
				}
			});
			return d;
		}
	};	
	//渲染一个实例
  obj.prototype.render = function(){
		var o=this,c=o.config,f=c.field;
		$E = $(c.elem);
		if($E.length==0){
			console.error(MOD_NAME+' hint:找不到容器 ' +c.elem);
			return false;
		}
		if(Object.prototype.toString.call(c.data)!='[object Array]'){
			var data = o.getData(c.data);
			if(data===false){
				console.error(MOD_NAME+' hint:缺少分类数据');
				return false;
			}
			o.config.data =  data;
		}

		//给容器添加一个类名
		$E.addClass('lay-ext-mulitsel');
		if(/^\d+$/.test(c.width)){
			$E.css('width',c.width+'px');
		}
		//添加专属的style
		if($('#lay-ext-mulitsel-style').length==0){
		var style = '.lay-ext-mulitsel .layui-form-select dl dd div{margin-top:0px!important;}.lay-ext-mulitsel .layui-form-select dl dd.layui-this{background-color:#fff}.lay-ext-mulitsel .layui-input.multiple{line-height:auto;height:auto;padding:4px 10px 4px 10px;overflow:hidden;min-height:38px;margin-top:-38px;left:0;z-index:99;position:relative;background:#fff;}.lay-ext-mulitsel .layui-input.multiple a{padding:2px 5px;background:#5FB878;border-radius:2px;color:#fff;display:block;line-height:20px;height:20px;margin:2px 5px 2px 0;float:left;}.lay-ext-mulitsel .layui-input.multiple a i{margin-left:4px;font-size:14px;} .lay-ext-mulitsel .layui-input.multiple a i:hover{background-color:#009E94;border-radius:2px;}.lay-ext-mulitsel .danger{border-color:#FF5722!important}.lay-ext-mulitsel .tips{pointer-events: none;position: absolute;left: 10px;top: 10px;color:#757575;}';
			$('<style id="lay-ext-mulitsel-style"></style>').text(style).appendTo($('head'));
		};
		
		//创建选项
		o.createOption();
	    //设置选中值
	    o.set(c.selected);
		
		//展开/收起选项
		$E.on('click','.layui-select-title,.multiple,.multiple.layui-edge',function(e){
			//隐藏其他实例显示的弹层
			let oldValue = o.values;
			$('.lay-ext-mulitsel').not(c.elem).removeClass('layui-form-selected');
			if($(c.elem).is('.layui-form-selected')){
				$(c.elem).removeClass('layui-form-selected');
				
				$(document).off('click', mEvent);
				if (c.callback != null && oldValue != o.values) {
					//c.callback(o.values);
					if (!$.isFunction(c.callback)) {
						eval(c.callback);
					}
					else {
						c.callback(o.values);
					}
				}
			}
			else{
				$(c.elem).addClass('layui-form-selected');
				
				$(document).on('click',mEvent=function(e){
					if(e.target.id!==c.elem && e.target.className!=='layui-input multiple'){
						$(c.elem).removeClass('layui-form-selected');			
						$(document).off('click', mEvent);
						if (c.callback != null && oldValue != o.values) {
							//c.callback(o.values);
							if (!$.isFunction(c.callback)) {
								eval(c.callback);
							}
							else {
								c.callback(o.values);
							}
						}
					}
				});	
			}
		});
			
		//点击选项
		$E.on('click','dd',function(e){
			var _dd = $(this);
			if(_dd.hasClass('layui-disabled')){
				return false;
			}
			//点 请选择
			if (_dd.is('.layui-select-tips')) {				
				_dd.siblings().removeClass('layui-this');
				$(c.elem).find('.layui-form-checkbox').removeClass('layui-form-checked');
			}
			//取消选中
			else if(_dd.is('.layui-this')){
				_dd.removeClass('layui-this');
				_dd.find('.layui-form-checkbox').removeClass('layui-form-checked');
				e.stopPropagation();
			}
			//选中
			else{
				if(o.selected.length >= c.max){
					$(c.elem+' .multiple').addClass('danger');
					layer.tips('最多只能选择 '+c.max+' 个', c.elem+' .multiple', {
						tips: 3,
						time: 1000,
						end:function(){					
							$(c.elem+' .multiple').removeClass('danger');
						}
					});
					return false;
				}
				else{
					_dd.addClass('layui-this');
					_dd.find('.layui-form-checkbox').addClass('layui-form-checked');
					e.stopPropagation();					
				}
			}
			
			o.setSelected();
		});
		
		//删除选项
		$E.on('click','a i',function(e){
			var _this = $(this).prev('span');
			var v = _this.attr('lay-value');
			if(v){
				var _dd = $(c.elem).find('dd[lay-value='+v+']');
				_dd.removeClass('layui-this');
				_dd.find('.layui-form-checkbox').removeClass('layui-form-checked');
			}
			o.setSelected();
			_this.parent().remove();
			e.stopPropagation();
			if (c.callback != null) {
				if (!$.isFunction(c.callback)) {
					eval(c.callback);
				}
				else {
					c.callback(o.values);
				}
			}
		});
	  //全选,清空
	  $E.on('click', 'input', function (e) {
		  var _dd = $(this);
		  if (_dd.hasClass('layui-disabled')) {
			  return false;
		  }
		  if (_dd) {
			 if (_dd[0].value && _dd[0].value == "全选") {
				 $(c.elem).find('dd').addClass('layui-this');
				 $(c.elem).find('.layui-select-tips').removeClass('layui-this'); 
				 $(c.elem).find('.layui-form-checkbox').addClass('layui-form-checked');
			 }
			 else if (_dd[0].value && _dd[0].value == "清空") {
				 $(c.elem).find('dd').removeClass('layui-this');
				 $(c.elem).find('.layui-form-checkbox').removeClass('layui-form-checked');
			 }
		  }
		  o.setSelected();
	  });
		//验证失败样式
		$E.find('input').focus(function(){
			$(c.elem+' .multiple').addClass('danger');
			setTimeout(function(){
				$(c.elem+' .multiple').removeClass('danger');
			},3000);
		});
	}
	
	//输出模块
	exports(MOD_NAME, function (config) {
		var _this = new obj(config);
		_this.render();
		return _this;
  });
});

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值