292 lines
9.2 KiB
JavaScript
292 lines
9.2 KiB
JavaScript
/*
|
||
* @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: '',
|
||
|
||
//最多选中个数，默认5
|
||
max : 5,
|
||
|
||
//选择框宽度
|
||
width:null,
|
||
|
||
//值验证，与lay-verify一致
|
||
verify: '',
|
||
|
||
//input的name 不设置与选择器相同(去#.)
|
||
name: '',
|
||
|
||
//值的分隔符
|
||
delimiter: ',',
|
||
|
||
//候选项数据的键名 status=0为禁用状态
|
||
field: {idName:'id',titleName:'name',statusName:'status'}
|
||
}
|
||
|
||
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">'+tips+'</dd>';
|
||
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"></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">ဆ</i></a>');
|
||
selected.push(item);
|
||
});
|
||
}
|
||
spans.push('<i class="layui-edge" style="pointer-events: none;"></i>');
|
||
if(c.elem == "#timeadmin-shiqu"){
|
||
$E.find('.multiple').html('<a href="javascript:;"><span lay-value="'+items.length +'个">'+items.length+'个</span><i class="layui-icon">ဆ</i></a>');
|
||
}else{
|
||
$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('min-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();
|
||
|
||
//展开/收起选项
|
||
$E.on('click','.layui-select-title,.multiple,.multiple.layui-edge',function(e){
|
||
//隐藏其他实例显示的弹层
|
||
$('.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);
|
||
}
|
||
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);
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
//点击选项
|
||
$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();
|
||
|
||
});
|
||
|
||
//验证失败样式
|
||
$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;
|
||
});
|
||
}); |