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" /> <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"></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" /> <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"></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>');
$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;
});
});