rain
233 lines
8.7 KiB
JavaScript
233 lines
8.7 KiB
JavaScript
layui.define('layer', function(exports) {
|
|
var $ = layui.$, layer = layui.layer;
|
|
'use strict';
|
|
|
|
var SelectY2 = function(o) {
|
|
this.c = {
|
|
elem: '',
|
|
data: '',
|
|
url: '',
|
|
placeholder: '请选择：',
|
|
disabledTips: '',
|
|
success: function() {}
|
|
};
|
|
this.c = $.extend(this.c, o);
|
|
this.init();
|
|
};
|
|
|
|
SelectY2.prototype = {
|
|
init: function() {
|
|
this.data = this.c.url ? this.getData(this.c.url) : this.c.data;
|
|
this.render();
|
|
},
|
|
|
|
getData: function(url) {
|
|
var res;
|
|
$.ajax({
|
|
url: url,
|
|
type: "get",
|
|
dataType: 'json',
|
|
async: false,
|
|
success: function(e) {
|
|
res = e.data || layer.msg('数据接口错误，请正确配置');
|
|
},
|
|
error: function() {
|
|
layer.msg('数据接口错误，请正确配置');
|
|
res = '';
|
|
}
|
|
});
|
|
return res;
|
|
},
|
|
|
|
getChild: function(data, pid) {
|
|
var child = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
if (data[i].pid == pid) {
|
|
child.push(data[i]);
|
|
}
|
|
}
|
|
return child;
|
|
},
|
|
|
|
createChild: function(items) {
|
|
var o = this;
|
|
var ul = '<ul>';
|
|
for (var i = 0; i < items.length; i++) {
|
|
var row = o.getChild(o.data, items[i].id);
|
|
row = row.length != 0 ? 'child-row' : '';
|
|
var off = items[i].off ? 'layui-disabled' : '';
|
|
ul += '<li class="' + row + ' ' + off + '" data-id="' + items[i].id + '">' + items[i].name + '</li>';
|
|
}
|
|
ul += '</ul>';
|
|
return ul;
|
|
},
|
|
|
|
setValue: function(value) {
|
|
var o = this, data = o.data;
|
|
var elem = $(o.c.elem);
|
|
var parent = elem.parent();
|
|
|
|
// 清空当前选中状态和弹出层内容
|
|
parent.find('.pop').empty();
|
|
parent.find('.show').html(o.c.placeholder);
|
|
elem.val('');
|
|
|
|
// 查找匹配的值路径
|
|
var path = [];
|
|
var currentItems = o.getChild(data, 0); // 从顶级开始
|
|
|
|
for (var i = 0; i < value.length; i++) {
|
|
var found = false;
|
|
for (var j = 0; j < currentItems.length; j++) {
|
|
if (currentItems[j].name === value[i]) {
|
|
path.push(currentItems[j]);
|
|
currentItems = o.getChild(data, currentItems[j].id);
|
|
found = true;
|
|
break;
|
|
}
|
|
}
|
|
if (!found) {
|
|
break; // 如果没找到匹配项，中断循环
|
|
}
|
|
}
|
|
|
|
if (path.length > 0) {
|
|
// 重建弹出层结构
|
|
parent.find('.pop').empty();
|
|
for (var k = 0; k < path.length; k++) {
|
|
var items = o.getChild(data, k === 0 ? 0 : path[k-1].id);
|
|
var itemsHtml = o.createChild(items);
|
|
parent.find('.pop').append(itemsHtml);
|
|
|
|
// 激活当前层级的选择项
|
|
var currentUl = parent.find('.pop ul').eq(k);
|
|
currentUl.find('li[data-id="' + path[k].id + '"]').addClass('active');
|
|
}
|
|
|
|
// 添加下一级（如果有）
|
|
var lastItem = path[path.length - 1];
|
|
var childItems = o.getChild(data, lastItem.id);
|
|
if (childItems.length > 0) {
|
|
var childHtml = o.createChild(childItems);
|
|
parent.find('.pop').append(childHtml);
|
|
}
|
|
|
|
// 更新显示值和输入框值
|
|
var showValue = path.map(function(item) { return item.name; }).join('<i>/</i>');
|
|
var inputValue = path.map(function(item) { return item.name; }).join('/');
|
|
|
|
parent.find('.show').html(showValue);
|
|
elem.val(inputValue);
|
|
|
|
// 调用成功回调
|
|
if (typeof o.c.success === "function") {
|
|
var ids = path.map(function(item) { return item.id; });
|
|
var vvv = path.map(function(item){return item.name;});
|
|
o.c.success({
|
|
data: vvv,
|
|
ids: ids
|
|
});
|
|
}
|
|
|
|
// 返回 ID 数组（关键修改）
|
|
return path.map(function(item) { return item.id; });
|
|
}
|
|
|
|
return []; // 如果没有匹配项，返回空数组
|
|
},
|
|
|
|
showPopup: function(data, id) {
|
|
var o = this;
|
|
var items = o.getChild(data, id);
|
|
if (items.length != 0) {
|
|
var itemsHtml = o.createChild(items);
|
|
$(o.c.elem).parent().find('.pop').append(itemsHtml);
|
|
}
|
|
},
|
|
|
|
scroll: function() {
|
|
var o = this, c = o.c, ele = c.elem;
|
|
var x = $(ele).parent().find('.pop ul');
|
|
for (var j = 0; j < x.length; j++) {
|
|
var e = x.eq(j).children('li.active');
|
|
if (e[0]) {
|
|
var t = e.position().top, i = x.eq(j).height(), a = e.height();
|
|
t > i && x.eq(j).scrollTop(t + x.eq(j).scrollTop() - i + a + 3),
|
|
t < 0 && x.eq(j).scrollTop(t + x.eq(j).scrollTop() - 5)
|
|
}
|
|
}
|
|
},
|
|
|
|
render: function() {
|
|
var o = this, c = o.c, e = c.elem;
|
|
var html = '<div class="selectY-box"></div>',
|
|
show = '<span class="show"><span class="cl-exp">' + c.placeholder + '</span></span>',
|
|
pop = '<div class="pop"></div>';
|
|
$(e).wrap(html);
|
|
$(e).after(show + pop);
|
|
|
|
o.showPopup(o.data, 0);
|
|
|
|
if ($(e).val() != '') {
|
|
var value = $(e).val().split('/');
|
|
var showValue = value.join('<i>/</i>');
|
|
$(e).parent().find('.show').html(showValue);
|
|
|
|
// 获取 setValue 返回的 ID 数组
|
|
var setID = o.setValue(value);
|
|
for (var i = 0; i < setID.length; i++) {
|
|
o.showPopup(o.data, setID[i]);
|
|
var fistUi = $(e).parent().find('.pop ul');
|
|
fistUi.eq(i).find('li[data-id=' + setID[i] + ']').addClass('active');
|
|
}
|
|
}
|
|
|
|
$(e).parent().find('.pop').on('click', 'ul li', function(en) {
|
|
if ($(this).hasClass("layui-disabled")) {
|
|
layer.msg(c.disabledTips);
|
|
return false;
|
|
}
|
|
$(this).addClass('active').siblings().removeClass('active');
|
|
$(this).parent().nextAll('ul').remove();
|
|
var id = $(this).data('id');
|
|
o.showPopup(o.data, id);
|
|
if (!$(this).hasClass("child-row")) {
|
|
$(e).parent().find('.pop').hide();
|
|
var activeLi = $(e).parent().find('.pop li.active');
|
|
var checkValue = [], ids = [];
|
|
for (var i = 0; i < activeLi.length; i++) {
|
|
checkValue.push(activeLi.eq(i).html());
|
|
ids.push(activeLi.eq(i).data('id'))
|
|
}
|
|
var inputValue = checkValue.join('/');
|
|
var showValue = checkValue.join('<i>/</i>');
|
|
$(e).val(inputValue);
|
|
$(e).parent().find('.show').html(showValue);
|
|
|
|
if (typeof c.success === "function") {
|
|
var callback = {
|
|
data: checkValue,
|
|
ids: ids
|
|
};
|
|
c.success(callback);
|
|
}
|
|
}
|
|
layui.stope(en);
|
|
});
|
|
|
|
$(e).parent().find('.show').on('click', function(en) {
|
|
$(e).parent().find('.pop').show();
|
|
o.scroll();
|
|
layui.stope(en);
|
|
});
|
|
|
|
$(document).on('click', function() {
|
|
$(e).parent().find('.pop').hide();
|
|
});
|
|
}
|
|
};
|
|
|
|
exports('selectY2', function(o) {
|
|
return new SelectY2(o);
|
|
});
|
|
}).link(layui.cache.base + "selectY/selectY.css?v=" + (new Date).getTime()); |