家谱现有接口调试50%
This commit is contained in:
rain
@@ -0,0 +1,279 @@
|
||||
/*
|
||||
* @version: 1.2
|
||||
* @Author: tomato
|
||||
* @Date: 2018-4-24 22:56:00
|
||||
* @Last Modified by: tomato
|
||||
* @Last Modified time: 2018-5-26 18:08:43
|
||||
*/
|
||||
//无限级下拉框
|
||||
layui.define(['jquery', 'form'], function(exports){
|
||||
var MOD_NAME = 'selectN';
|
||||
var $ = layui.jquery;
|
||||
var form = layui.form;
|
||||
var obj = function(config){
|
||||
//当前选中数据值名数据
|
||||
this.selected =[];
|
||||
//当前选中的值
|
||||
this.values = [];
|
||||
//当前选中的名
|
||||
this.names = [];
|
||||
//当前选中最后一个值
|
||||
this.lastValue = '';
|
||||
//当前选中最后一个值
|
||||
this.lastName = '';
|
||||
//是否已选
|
||||
this.isSelected = false;
|
||||
//初始化配置
|
||||
this.config = {
|
||||
//选择器id或class
|
||||
elem: '',
|
||||
//无限级分类数据
|
||||
data: [],
|
||||
//默认选中值
|
||||
selected: [],
|
||||
//空值项提示，可设置为数组['请选择省','请选择市','请选择县']
|
||||
tips: '请选择',
|
||||
//是否允许搜索，可设置为数组[true,true,true]
|
||||
search:false,
|
||||
//选择项宽度，可设置为数组['80','90','100']
|
||||
width:null,
|
||||
//为真只取最后一个值
|
||||
last: false,
|
||||
//值验证，与lay-verify一致
|
||||
verify: '',
|
||||
//事件过滤器，lay-filter名
|
||||
filter: '',
|
||||
//input的name 不设置与选择器相同(去#.)
|
||||
name: '',
|
||||
//数据分隔符
|
||||
delimiter: ',',
|
||||
//数据的键名 status=0为禁用状态
|
||||
field:{idName:'id',titleName:'name',statusName:'status',childName:'children'},
|
||||
//多表单区分 form.render(type, filter); 为class="layui-form" 所在元素的 lay-filter="" 的值
|
||||
formFilter: null
|
||||
}
|
||||
|
||||
//实例化配置
|
||||
this.config = $.extend(this.config,config);
|
||||
|
||||
//“请选择”文字
|
||||
this.setTips = function(){
|
||||
var o = this,c = o.config;
|
||||
if(Object.prototype.toString.call(c.tips)!='[object Array]'){
|
||||
return c.tips;
|
||||
}
|
||||
else{
|
||||
var i=$(c.elem).find('select').length;
|
||||
return c.tips.hasOwnProperty(i) ? c.tips[i] : '请选择';
|
||||
}
|
||||
}
|
||||
|
||||
//设置是否允许搜索
|
||||
this.setSearch = function(){
|
||||
var o = this,c = o.config;
|
||||
if(Object.prototype.toString.call(c.search)!='[object Array]'){
|
||||
return c.search===true ? 'lay-search ' : ' ';
|
||||
}
|
||||
else{
|
||||
var i=$(c.elem).find('select').length;
|
||||
if(c.search.hasOwnProperty(i)){
|
||||
return c.search[i]===true ? 'lay-search ' : ' ';
|
||||
}
|
||||
}
|
||||
return ' ';
|
||||
}
|
||||
|
||||
//设置是否允许搜索
|
||||
this.setWidth = function(){
|
||||
var o = this,c = o.config;
|
||||
if(Object.prototype.toString.call(c.width)!='[object Array]'){
|
||||
return /^\d+$/.test(c.width) ? 'style="width:'+c.width+'px;" ' : ' ';
|
||||
}
|
||||
else{
|
||||
var i=$(c.elem).find('select').length;
|
||||
if(c.width.hasOwnProperty(i)){
|
||||
return /^\d+$/.test(c.width[i]) ? 'style="width:'+c.width[i]+'px;" ' : ' ';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//创建一个Select
|
||||
this.createSelect = function(optionData){
|
||||
var o = this,c = o.config,f=c.field;
|
||||
var html = '';
|
||||
html+= '<div class="layui-input-inline" '+o.setWidth()+'>';
|
||||
html+= ' <select '+o.setSearch()+'lay-filter="'+c.filter+'">';
|
||||
html+= ' <option value="">'+o.setTips()+'</option>';
|
||||
for(var i=0;i<optionData.length;i++){
|
||||
var disabled = optionData[i][f.statusName]==0 ? 'disabled="" ' : '';
|
||||
html+= ' <option '+disabled+'value="'+optionData[i][f.idName]+'">'+optionData[i][f.titleName]+'</option>';
|
||||
}
|
||||
html+= ' </select>';
|
||||
html+= '</div>';
|
||||
return html;
|
||||
};
|
||||
|
||||
//获取当前option的数据
|
||||
this.getOptionData=function(catData,optionIndex){
|
||||
var f = this.config.field;
|
||||
var item = catData;
|
||||
for(var i=0;i<optionIndex.length;i++){
|
||||
if('undefined' == typeof item[optionIndex[i]]){
|
||||
item = null;
|
||||
break;
|
||||
}
|
||||
else if('undefined' == typeof item[optionIndex[i]][f.childName]){
|
||||
item = null;
|
||||
break;
|
||||
}
|
||||
else{
|
||||
item = item[optionIndex[i]][f.childName];
|
||||
}
|
||||
}
|
||||
return item;
|
||||
};
|
||||
|
||||
//初始化
|
||||
this.set = function(selected){
|
||||
var o = this,c = o.config;
|
||||
$E = $(c.elem);
|
||||
//创建顶级select
|
||||
var verify = c.verify=='' ? '' : 'lay-verify="'+c.verify+'" ';
|
||||
var html = '<div style="height:0px;width:0px;overflow:hidden"><input '+verify+'name="'+c.name+'"></div>';
|
||||
html += o.createSelect(c.data);
|
||||
$E.html(html);
|
||||
selected = typeof selected=='undefined' ? c.selected : selected;
|
||||
var index=[];
|
||||
for(var i=0;i<selected.length;i++){
|
||||
//设置最后一个select的选中值
|
||||
$E.find('select:last').val(selected[i]);
|
||||
//获取该选中值的索引
|
||||
var lastIndex = $E.find('select:last').get(0).selectedIndex-1;
|
||||
index.push(lastIndex);
|
||||
//取出下级的选项值
|
||||
var childItem = o.getOptionData(c.data,index);
|
||||
//下级选项值存在则创建select
|
||||
if(childItem){
|
||||
var html = o.createSelect(childItem);
|
||||
$E.append(html);
|
||||
}
|
||||
}
|
||||
form.render('select',c.formFilter);
|
||||
o.getSelected();
|
||||
};
|
||||
|
||||
//下拉事件
|
||||
this.change = function(elem){
|
||||
var o = this,c = o.config;
|
||||
var $thisItem = elem.parent();
|
||||
//移除后面的select
|
||||
$thisItem.nextAll('div.layui-input-inline').remove();
|
||||
var index=[];
|
||||
//获取所有select，取出选中项的值和索引
|
||||
$thisItem.parent().find('select').each(function(){
|
||||
index.push($(this).get(0).selectedIndex-1);
|
||||
});
|
||||
|
||||
var childItem = o.getOptionData(c.data,index);
|
||||
if(childItem){
|
||||
var html = o.createSelect(childItem);
|
||||
$thisItem.after(html);
|
||||
form.render('select',c.formFilter);
|
||||
}
|
||||
o.getSelected();
|
||||
};
|
||||
|
||||
//获取所有值-数组 每次选择后执行
|
||||
this.getSelected=function(){
|
||||
var o = this,c = o.config;
|
||||
var values =[];
|
||||
var names =[];
|
||||
var selected =[];
|
||||
$E = $(c.elem);
|
||||
$E.find('select').each(function(){
|
||||
var item = {};
|
||||
var v = $(this).val()
|
||||
var n = $(this).find('option:selected').text();
|
||||
item.value = v;
|
||||
item.name = n;
|
||||
values.push(v);
|
||||
names.push(n);
|
||||
selected.push(item);
|
||||
});
|
||||
o.selected =selected;
|
||||
o.values = values;
|
||||
o.names = names;
|
||||
o.lastValue = $E.find('select:last').val();
|
||||
o.lastName = $E.find('option:selected:last').text();
|
||||
|
||||
o.isSelected = o.lastValue=='' ? false : true;
|
||||
var inputVal = c.last===true ? o.lastValue : o.values.join(c.delimiter);
|
||||
$E.find('input[name="'+c.name+'"]').val(inputVal);
|
||||
};
|
||||
//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;
|
||||
$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;
|
||||
}
|
||||
|
||||
c.filter = c.filter=='' ? c.elem.replace('#','').replace('.','') : c.filter;
|
||||
c.name = c.name=='' ? c.elem.replace('#','').replace('.','') : c.name;
|
||||
o.config = c;
|
||||
|
||||
//初始化
|
||||
o.set();
|
||||
|
||||
//监听下拉事件
|
||||
form.on('select('+c.filter+')',function(data){
|
||||
o.change($(data.elem));
|
||||
});
|
||||
//验证失败样式
|
||||
$E.find('input[name="'+c.name+'"]').focus(function(){
|
||||
var t = $(c.elem).offset().top;
|
||||
$('html,body').scrollTop(t-200);
|
||||
$(c.elem).find('select:last').addClass('layui-form-danger');
|
||||
setTimeout(function(){
|
||||
$(c.elem).find('select:last').removeClass('layui-form-danger');
|
||||
},3000);
|
||||
});
|
||||
}
|
||||
|
||||
//输出模块
|
||||
exports(MOD_NAME, function (config) {
|
||||
var _this = new obj(config);
|
||||
_this.render();
|
||||
return _this;
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user