699 lines
19 KiB
JavaScript
699 lines
19 KiB
JavaScript
/**
|
||
* @Name: 基于layui的异步无限级联选择器
|
||
* @Author: 前端喵
|
||
* 创建时间: 2019/05/23
|
||
* 使用说明: 在主文件里面使用layui.config设置，具体方法看index.html
|
||
*/
|
||
|
||
/**
|
||
* 参数说明：
|
||
* width（可选） :input框宽度
|
||
* height（可选）：input框高度
|
||
*/
|
||
layui.define(["jquery"],(exports)=>{
|
||
let $ = layui.jquery;
|
||
// 私有方法，禁止外面调用的方法
|
||
function Private(){
|
||
//页面初始化默认值
|
||
this.param = {
|
||
width: 220,
|
||
height: 40,
|
||
prop: {
|
||
value: "value",
|
||
label: "label",
|
||
children: 'children'
|
||
},
|
||
clicklast: false,
|
||
time: 250,
|
||
placeholder: "请选择",
|
||
search: {
|
||
show: false,
|
||
minLabel: 10,
|
||
placeholder: '请输入搜索词'
|
||
}
|
||
},
|
||
// 定义全局状态仓库
|
||
this.store = {
|
||
showCascader: false,
|
||
cascaderDom: null, // 当前elem对象
|
||
cascaderAll: null, // 生成的Dom主对象
|
||
input: null, // input框dom
|
||
inputI: null, // input框箭头dom
|
||
model: null, // 下拉菜单的主dom
|
||
li: null, // li标签
|
||
parentNextAll: null, // 当前操作的li标签元素后面所有ul集合
|
||
brother: null, // li标签同级dom集合
|
||
data: [], // 所有从后端异步请求的数据集合
|
||
chooseData: [], // 已选中的数据集
|
||
zIndex: 2000 // 显示顺序
|
||
}
|
||
}
|
||
// 页面初始化
|
||
Private.prototype.init = function(options){
|
||
let store = this.store
|
||
let param = this.param
|
||
// dom变量初始化
|
||
store.cascaderDom = $(options.elem)
|
||
|
||
// 把用户的参数值进行存储
|
||
// 开始存储
|
||
for (let i in options) {
|
||
if (options[i].length !== 0) {
|
||
if (i == "prop" | i == 'search') {
|
||
for (let x in options[i]) {
|
||
param[i][x] = options[i][x]
|
||
}
|
||
} else {
|
||
param[i] = options[i]
|
||
}
|
||
}
|
||
}
|
||
delete param.data
|
||
if (options.data) {
|
||
store.data = options.data
|
||
}
|
||
param.device = this.checkDevice()
|
||
// 存储结束
|
||
if (store.cascaderDom.next().hasClass('cascader-all')) {
|
||
store.cascaderDom.next().remove()
|
||
}
|
||
param.className = 'cascader-' + this.param.elem.replace('#', '')
|
||
let phoneName = ''
|
||
if (param.device === 1) {
|
||
phoneName = 'cascader-model-phone'
|
||
}
|
||
// 渲染主dom
|
||
store.cascaderDom.after(`
|
||
<div class="cascader-all ` + param.className + `" style="width:`+this.param.width+`px;">
|
||
<input type="text" class="layui-input cascader-input" placeholder="`+param.placeholder+`" readonly style="width:`+this.param.width+`px;height:`+this.param.height+`px;">
|
||
<i class="layui-icon layui-icon-down cascader-i" style="top:`+this.param.height/2+`px;"></i>
|
||
<div class="cascader-model ` + phoneName + `" style="z-index:`+this.store.zIndex+`;display:flex;">
|
||
</div>
|
||
</div>
|
||
`)
|
||
|
||
// 判断elem是否存在以及是否正确，elem必填
|
||
if(!options.elem || options.elem == ""){
|
||
layer.msg('请配置有效的elem值 ')
|
||
}else if($(options.elem).length == 0){
|
||
layer.msg('请配置有效的elem值 ')
|
||
}
|
||
|
||
store.input = store.cascaderDom.nextAll().find('.cascader-input')
|
||
store.inputI = store.input.next()
|
||
store.cascaderAll = $(store.cascaderDom.nextAll()[0])
|
||
store.model = store.cascaderDom.nextAll().find('.cascader-model')
|
||
store.li = store.model.find('li')
|
||
// 全局状态初始化
|
||
store.model.hide()
|
||
|
||
if (store.data.length == 0) {
|
||
param.getChildren(param.value, data => {
|
||
store.data = data
|
||
this.liHtml(store.data)
|
||
if (param.checkData) {
|
||
if (param.checkData.length > 0) {
|
||
this.dataToshow(param.checkData)
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
this.liHtml(store.data)
|
||
if (param.checkData) {
|
||
if (param.checkData.length > 0) {
|
||
this.dataToshow(param.checkData)
|
||
}
|
||
}
|
||
}
|
||
// 先进入是否禁用判断事件
|
||
// 不禁用则执行下面的事件
|
||
this.disabled()
|
||
.then(res => {
|
||
this.inputClick(options)
|
||
this.liClick()
|
||
this.liHover()
|
||
this.modelHandle()
|
||
if (param.search.show) {
|
||
this.handleSearch()
|
||
}
|
||
})
|
||
}
|
||
|
||
// 判断是否禁用
|
||
Private.prototype.disabled = function() {
|
||
const disabled = this.param.disabled
|
||
const cascaderAll = this.store.cascaderAll
|
||
const input = this.store.input
|
||
return new Promise((resolve, reject) => {
|
||
if (disabled) {
|
||
cascaderAll.addClass('cascader-disabled')
|
||
}else{
|
||
resolve()
|
||
}
|
||
})
|
||
}
|
||
|
||
// li标签赋值方法
|
||
// key为string类型
|
||
Private.prototype.liHtml = function(data, key, choose){
|
||
let lis=[]
|
||
let param = this.param
|
||
let store = this.store
|
||
let position = []
|
||
let key1 = ''
|
||
if (!key || key.length == 0) {
|
||
key=""
|
||
} else {
|
||
key = key.join('-')
|
||
key1 = key
|
||
key = key+"-"
|
||
}
|
||
if (data !== "") {
|
||
for (let i in data) {
|
||
let li = '<li value="'+data[i][param.prop.value]+'" key="'+key+i+'"'
|
||
if (i == choose) {
|
||
li = li +' class="cascader-choose-active"'
|
||
position = [i,data.length]
|
||
}
|
||
// 来自于陈诗樵的BUG修复,github地址:https://github.com/alasq
|
||
// data[i].children 改为 data[i][param.prop.children]
|
||
if (data[i].hasChild == true || data[i][param.prop.children]) {
|
||
li = li+'>'+data[i][param.prop.label]+'<i class="layui-icon layui-icon-right"></i></li>'
|
||
} else {
|
||
li = li+'>'+data[i][param.prop.label]+'</li>'
|
||
}
|
||
lis.push(li)
|
||
}
|
||
}
|
||
lis = lis.join('')
|
||
if (data && data.length>0){
|
||
if (param.search.show && data.length > param.search.minLabel) {
|
||
lis = '<input class="layui-input cascader-model-input" key="'+ key1 + '" placeholder="'+ param.search.placeholder +'">' + lis
|
||
}
|
||
} else {
|
||
lis = '<p class="nodata">暂无数据</p>'
|
||
console.log('数据为空，无法进行渲染')
|
||
}
|
||
let ul = $(`
|
||
<ul class="cascader-ul">`+lis+`</ul>
|
||
`)
|
||
ul.fadeIn('fast')
|
||
store.model.append(ul)
|
||
this.liPosition(position)
|
||
this.ModelPosition()
|
||
}
|
||
|
||
// 当前选中的跳转位置
|
||
Private.prototype.liPosition = function(position) {
|
||
let model = this.store.model.find('ul').last()
|
||
}
|
||
|
||
Private.prototype.handleSearch = function() {
|
||
let model = this.store.model
|
||
let prop = this.param.prop
|
||
let _this = this
|
||
let value = ''
|
||
let flag = true
|
||
model.on('compositionstart',function(){
|
||
flag = false
|
||
})
|
||
model.on('compositionend',function(){
|
||
flag = true
|
||
})
|
||
model.on('input', 'input', function() {
|
||
setTimeout(()=>{
|
||
if (flag) {
|
||
let data = _this.store.data
|
||
if (value == this.value) {
|
||
return
|
||
}
|
||
value = this.value
|
||
let key = $(this).attr('key').split('-')
|
||
let key1 = $(this).attr('key') + '-'
|
||
if ($(this).attr('key')) {
|
||
for (i in key) {
|
||
if (data[key[i]][prop.children]){
|
||
data = data[key[i]][prop.children]
|
||
}
|
||
}
|
||
}
|
||
let renderData = []
|
||
let lis = ''
|
||
for (i in data) {
|
||
if (data[i][prop.label].indexOf(value) > -1) {
|
||
if (data[i][prop.children] | data[i].hasChild) {
|
||
lis += '<li value="'+data[i][prop.value]+'" key="'+key1+i+'">'+data[i][prop.label]+'<i class="layui-icon layui-icon-right"></i></li>'
|
||
} else {
|
||
lis += '<li value="'+data[i][prop.value]+'" key="'+key1+i+'">'+data[i][prop.label]+'</li>'
|
||
}
|
||
|
||
renderData.push(data[i])
|
||
}
|
||
}
|
||
$(this.parentNode).find('li').remove()
|
||
$(this.parentNode).append(lis)
|
||
}
|
||
}, 0)
|
||
})
|
||
}
|
||
|
||
Private.prototype.modelHandle = function() {
|
||
$(window).resize(() => { //当浏览器大小变化时
|
||
let model = this.store.model
|
||
this.ModelPosition()
|
||
})
|
||
}
|
||
|
||
let modelWidth = 0
|
||
Private.prototype.ModelPosition = function() {
|
||
let model = this.store.model
|
||
let input = this.store.input
|
||
let BodyWidth = document.documentElement.clientWidth
|
||
let positionLeft = 0,
|
||
left = 0
|
||
if (window.getComputedStyle(model[0]).width !== "auto") {
|
||
modelWidth = window.getComputedStyle(model[0]).width.replace('px','')
|
||
}
|
||
left = input.offset().left - model.position().left
|
||
if (BodyWidth < modelWidth) {
|
||
positionLeft = BodyWidth - modelWidth
|
||
}
|
||
if (positionLeft < 0) {
|
||
model.css("left",positionLeft - 30)
|
||
} else {
|
||
model.css('left',0)
|
||
}
|
||
}
|
||
// 鼠标hover监听事件[li标签]
|
||
Private.prototype.liHover = function(){
|
||
let store = this.store
|
||
let param = this.param
|
||
let _this = this
|
||
store.model.on('mouseenter', 'li', function() {
|
||
store.parentNextAll = $(this).parent("ul").nextAll()
|
||
store.brother = $(this).siblings()
|
||
if ($(this).find('i').length == 0) {
|
||
store.parentNextAll.fadeOut('fast', function() {
|
||
store.parentNextAll.remove()
|
||
})
|
||
} else {
|
||
let keys=$(this).attr('key')
|
||
let value = $(this).attr('value')
|
||
let data = _this.store.data
|
||
let childrenName = _this.param.prop.children
|
||
keys = keys.split('-')
|
||
let goodData = data
|
||
|
||
for (let i in keys) {
|
||
let key = keys[i]
|
||
if (goodData) {
|
||
if (goodData[key]) {
|
||
goodData = goodData[key][childrenName]
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
if (!goodData) {
|
||
param.getChildren(value, datax => {
|
||
goodData = datax
|
||
let children = data
|
||
if (goodData && goodData.length != 0) {
|
||
for (let i in keys) {
|
||
if (i == keys.length - 1) {
|
||
children = goodData
|
||
} else {
|
||
if (!children[keys[i]][childrenName]) {
|
||
children[keys[i]][childrenName] = new Array()
|
||
}
|
||
children = children[keys[i]][childrenName]
|
||
}
|
||
}
|
||
DataTreeAdd(data,goodData,keys)
|
||
store.parentNextAll = $(this).parent("ul").nextAll()
|
||
store.parentNextAll.remove()
|
||
_this.liHtml(goodData, keys)
|
||
} else {
|
||
$(this).find('i').remove()
|
||
store.parentNextAll.remove()
|
||
DataTreeChange(data, keys)
|
||
}
|
||
})
|
||
} else {
|
||
store.parentNextAll.remove()
|
||
_this.liHtml(goodData, keys)
|
||
}
|
||
// 增加data的树结点
|
||
function DataTreeAdd(data, newData, keys) {
|
||
let array = data
|
||
for (let k in keys) {
|
||
if (k < keys.length -1) {
|
||
array = array[keys[k]][param.prop.children]
|
||
} else {
|
||
array = array[keys[k]]
|
||
}
|
||
}
|
||
array.children = newData
|
||
}
|
||
function DataTreeChange(data, keys) {
|
||
let array = data
|
||
for (let k in keys) {
|
||
if (k < keys.length -1) {
|
||
array = array[keys[k]][param.prop.children]
|
||
} else {
|
||
array = array[keys[k]]
|
||
}
|
||
}
|
||
array.hasChild = false
|
||
}
|
||
|
||
}
|
||
$(this).addClass('cascader-choose-active')
|
||
store.brother.removeClass('cascader-choose-active')
|
||
store.parentNextAll.children().removeClass('cascader-choose-active')
|
||
|
||
// 获取所有的已选中的数据，并回显至input选择框中
|
||
// _this.getChooseData();
|
||
});
|
||
}
|
||
|
||
// 鼠标点击监听事件[li标签]
|
||
Private.prototype.liClick = function() {
|
||
let _this = this
|
||
let store = this.store
|
||
let param = this.param
|
||
let className = param.className
|
||
// store.model为一个自定义dom对象
|
||
if (param.clicklast == false) {
|
||
store.model.on('click', 'li', function() {
|
||
_this.getChooseData()
|
||
store.showCascader = !store.showCascader
|
||
if (param.device === 1){
|
||
|
||
} else {
|
||
store.model.slideUp(_this.param.time)
|
||
}
|
||
store.inputI.removeClass('rotate')
|
||
})
|
||
} else {
|
||
store.model.on('click', 'li', function() {
|
||
store.parentNextAll = $(this).parent("ul").nextAll()
|
||
if (store.parentNextAll.length == 0) {
|
||
_this.getChooseData()
|
||
store.showCascader = !store.showCascader
|
||
if (param.device === 1){
|
||
|
||
} else {
|
||
store.model.slideUp(_this.param.time)
|
||
}
|
||
store.inputI.removeClass('rotate')
|
||
_this.getThisData()
|
||
}
|
||
})
|
||
}
|
||
|
||
}
|
||
|
||
// 判断当前访问客户端是PC还是移动端
|
||
// PC端返回1，移动端返回0
|
||
Private.prototype.checkDevice = function() {
|
||
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
|
||
return 1
|
||
} else {
|
||
return 0
|
||
}
|
||
}
|
||
|
||
// 获取当前层级数据
|
||
Private.prototype.getThisData = function() {
|
||
let value = this.param.prop.value
|
||
,children = this.param.prop.children
|
||
,chooseData = this.store.chooseData
|
||
,data = this.store.data
|
||
,currentData = []
|
||
for (const i in chooseData) {
|
||
for (const x in data) {
|
||
if (chooseData[i] == data[x][value]) {
|
||
if (Number(i) === chooseData.length - 1) {
|
||
currentData = JSON.parse(JSON.stringify(data[x]))
|
||
break
|
||
}
|
||
if (data[x][children]) {
|
||
data = data[x][children]
|
||
} else {
|
||
data = data[x]
|
||
}
|
||
break
|
||
}
|
||
}
|
||
}
|
||
return currentData
|
||
}
|
||
// 鼠标监听事件[input控件]
|
||
Private.prototype.inputClick = function(options) {
|
||
let store = this.store
|
||
let param = this.param
|
||
let _this = this
|
||
$(document).click(function(e) {
|
||
let className = e.target.className
|
||
className = className.split(" ")
|
||
let other = ['cascader-input', 'cascader-model', "cascader-choose-active", "layui-icon-right", "cascader-ul", "cascader-model-input"]
|
||
for (let i in className) {
|
||
for (let x in other) {
|
||
if (className[i] == other[x]) {
|
||
return
|
||
}
|
||
}
|
||
|
||
}
|
||
store.showCascader = false
|
||
store.model.slideUp(_this.param.time)
|
||
store.inputI.removeClass('rotate')
|
||
});
|
||
store.input.click(function() {
|
||
store.showCascader = !store.showCascader
|
||
if (store.showCascader == true) {
|
||
store.inputI.addClass('rotate')
|
||
let chooseData = _this.store.chooseData
|
||
let data = _this.store.data
|
||
if (chooseData.length !== 0) {
|
||
let key = []
|
||
_this.clearModel()
|
||
for (let i in chooseData) {
|
||
for (let x in data) {
|
||
if (data[x][param.prop.value] == chooseData[i]) {
|
||
_this.liHtml(data,key,x)
|
||
key.unshift(x)
|
||
data = data[x][param.prop.children]
|
||
break
|
||
}
|
||
}
|
||
}
|
||
}
|
||
store.model.slideDown(_this.param.time)
|
||
_this.ModelPosition()
|
||
} else {
|
||
store.model.slideUp(_this.param.time)
|
||
store.inputI.removeClass('rotate')
|
||
}
|
||
})
|
||
}
|
||
|
||
// 获取页面中选中的数据
|
||
Private.prototype.getChooseData = function() {
|
||
let store = this.store
|
||
let chooseDom = store.model.find('li.cascader-choose-active')
|
||
let chooseData = [];
|
||
let chooseLabel = [];
|
||
for(let i in chooseDom){
|
||
if(chooseDom[i].innerText){
|
||
chooseData.push($(chooseDom[i]).attr('value'));
|
||
chooseLabel.push(chooseDom[i].innerText);
|
||
}else{
|
||
break;
|
||
}
|
||
|
||
}
|
||
this.store.chooseData = chooseData;
|
||
this.inputValueChange(chooseLabel);
|
||
}
|
||
Private.prototype.inputValueChange = function(label){
|
||
let store = this.store;
|
||
let param = this.param;
|
||
if(param.showlast == true){
|
||
label = label[label.length-1];
|
||
}else{
|
||
label = label.join('/');
|
||
}
|
||
store.input.val(label);
|
||
let fontWidth = store.input.css('font-size').replace('px',''),
|
||
inputWidth = store.input.width(),
|
||
labelWidth = label.length;
|
||
let maxLabelWidth = Math.floor(inputWidth/fontWidth);
|
||
if(labelWidth>maxLabelWidth){
|
||
store.input.attr('title',label);
|
||
}else{
|
||
store.input.attr('title',"");
|
||
}
|
||
}
|
||
// 数据回显
|
||
Private.prototype.dataToshow = function(checkData){
|
||
let param = this.param;
|
||
let store = this.store;
|
||
let backData = []; //后端数据集合
|
||
let chooseLabel=[]; //选中的项对应的label值
|
||
let keys=[]; //checkData在数据源中的位置大全
|
||
backData[0] = store.data;
|
||
let flag = 1;
|
||
if(param.getChildren){
|
||
if (checkData.length === 1) {
|
||
for (let i in store.data) {
|
||
if (store.data[i][param.prop.value] == checkData[0]) {
|
||
let label = store.data[i][param.prop.label].split(',')
|
||
this.inputValueChange(label)
|
||
return
|
||
}
|
||
}
|
||
}
|
||
for(let i=1; i<checkData.length; i++){
|
||
if(i < checkData.length){
|
||
param.getChildren(checkData[i-1],data=>{
|
||
backData[i] = data;
|
||
flag++;
|
||
if(flag == checkData.length){
|
||
for(let i=checkData.length -1;i>=0;i--){
|
||
for(let x in backData[i]){
|
||
if(checkData[i] == backData[i][x][param.prop.value]){
|
||
keys.unshift(x);
|
||
chooseLabel.unshift(backData[i][x][param.prop.label])
|
||
if(i < checkData.length -1){
|
||
backData[i][x][param.prop.children] = backData[i+1];
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
store.data = backData[0];
|
||
|
||
// input框数据回显
|
||
this.inputValueChange(chooseLabel);
|
||
this.clearModel();
|
||
// 选择器数据回显
|
||
let key = [];
|
||
for(let i in backData){
|
||
if(i !== "0"){
|
||
key.push(keys[i-1]);
|
||
}
|
||
this.liHtml(backData[i],key,keys[i]);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}else{
|
||
let storeData = store.data;
|
||
for(let x in checkData){
|
||
for(let i in storeData){
|
||
if(storeData[i][param.prop.value] == checkData[x]){
|
||
chooseLabel.push(storeData[i][param.prop.label]);
|
||
keys.push(i)
|
||
storeData = storeData[i][param.prop.children];
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
// input框数据回显
|
||
this.inputValueChange(chooseLabel);
|
||
this.store.chooseData = checkData;
|
||
|
||
}
|
||
|
||
}
|
||
// 清空ul标签
|
||
Private.prototype.clearModel = function(){
|
||
let store = this.store;
|
||
store.model.html('');
|
||
}
|
||
// 监听下拉菜单的位置
|
||
Private.prototype.handlePosition = function(){
|
||
// 当前屏幕大小
|
||
// let bodyWidth =
|
||
}
|
||
|
||
let privates = new Array();
|
||
let dom_num = 0;
|
||
// 暴露给外界使用的方法
|
||
let cascader = {
|
||
|
||
// 页面初始化
|
||
load: function load(options) {
|
||
let current = null
|
||
for (let i in privates) {
|
||
if(privates[i].elem === options.elem){
|
||
current = i
|
||
}
|
||
}
|
||
if (!current) {
|
||
current = dom_num
|
||
dom_num ++
|
||
privates[current] = new Array()
|
||
privates[current].obj = new Private()
|
||
|
||
}
|
||
privates[current].elem = options.elem
|
||
privates[current].obj.store.zIndex -= current
|
||
privates[current].obj.store.data = []
|
||
if (options.chooseData) {
|
||
privates[current].obj.store.chooseData = options.chooseData
|
||
} else {
|
||
privates[current].obj.store.chooseData = []
|
||
}
|
||
privates[current].obj.init(options)
|
||
|
||
},
|
||
|
||
// 获取页面中选中的数据，数组形式
|
||
getChooseData: function(elem){
|
||
let obj = this.elemCheck(elem);
|
||
return obj.store.chooseData;
|
||
},
|
||
|
||
// 监听方法
|
||
on: function(type,elem,callback){
|
||
let obj = this.elemCheck(elem)
|
||
let className = obj.param.className
|
||
if(type == "click"){
|
||
$(document).on('click','.' + className + ' li',function(){
|
||
setTimeout(function(){
|
||
let data = obj.getThisData()
|
||
if(obj.param.clicklast === false){
|
||
callback(data)
|
||
}else{
|
||
if(obj.store.parentNextAll.length == 0){
|
||
callback(data)
|
||
}
|
||
}
|
||
},50)
|
||
});
|
||
}else if(type == "hover"){
|
||
obj.store.model.on('mouseenter','li',function(){
|
||
callback();
|
||
});
|
||
}
|
||
},
|
||
|
||
// elem位置判断，禁止外界调用，因为你调也没啥卵用
|
||
elemCheck:function(elem){
|
||
if(!elem){
|
||
return privates[0].obj;
|
||
}
|
||
for(let i in privates){
|
||
if(privates[i].elem == elem){
|
||
return privates[i].obj;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
layui.link(layui.cache.base + 'ajaxCascader.css');
|
||
exports('ajaxCascader',cascader);
|
||
}); |