家谱现有接口调试50%
This commit is contained in:
rain
@@ -0,0 +1,291 @@
|
||||
/*
|
||||
* @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'}
|
||||
}
|
||||
|
||||
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.redata=function(data){
|
||||
this.config.data = data;
|
||||
this.createOption();
|
||||
}
|
||||
//设置选中值 每次点击操作后执行
|
||||
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();
|
||||
|
||||
//展开/收起选项
|
||||
$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;
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user