597 lines
20 KiB
JavaScript
597 lines
20 KiB
JavaScript
/**
|
||
* Name: 级联选择器控件
|
||
* Version: 2020-06-16
|
||
* Author: 王海峰 <wanghaifeng@iyiou.com>
|
||
* Function List:
|
||
* 1. 级联面板 - 支持多选 - 单选
|
||
* 2. 支持回显已选中数据的完整路径 父级-父级-子级(可通过配置项 separator 自定义分隔符)
|
||
* 3. 支持删除单个选中的数据项
|
||
* 4. 支持一键删除所有选中数据项(可通过配置项 clearable 是否启用改功能)
|
||
* 5. 接口: 一键获取所选中的所有文本数组
|
||
* 6. 接口: 一键获取所选中的所有ID数组
|
||
*/
|
||
|
||
(function() {
|
||
/**
|
||
* cascader_node 适配器模式
|
||
* 将用户传入的数据通过该适配器进行处理
|
||
* 数据驱动的思路，一个 CascaderNode 实例对应一个数据项（不管是子级还是父级）
|
||
*/
|
||
var cascader_node = function () {
|
||
/**
|
||
* @param {Object} data 数据
|
||
* @param {Object} config 配置项
|
||
* @param {Object} parentNode 父级 递归时传入
|
||
*/
|
||
function CascaderNode(data, config, parentNode) {
|
||
this.data = data // 原始数据
|
||
this.config = config // 配置项
|
||
this.indeterminate = false // 该父级下的子级是否全选，用于控制父级显示状态(只有子级全选，父级才全选)
|
||
this.parent = parentNode || null // 该项的父级
|
||
this.level = !this.parent ? 1 : this.parent.level + 1 // 等级序列号
|
||
this.uid = data[config.value] // 数据ID
|
||
// 因是数据驱动的方式，一个数据项对应一个DOM，DOM选中与否
|
||
this.checked = false // 该项数据是否选中
|
||
this.initState()
|
||
this.initChildren()
|
||
}
|
||
|
||
/**
|
||
* 初始化数据
|
||
*/
|
||
CascaderNode.prototype.initState = function initState() {
|
||
var _config = this.config,
|
||
valueKey = _config.value,
|
||
labelKey = _config.label
|
||
|
||
this.value = this.data[valueKey]
|
||
this.label = this.data[labelKey]
|
||
this.pathNodes = this.calculatePathNodes()
|
||
this.path = this.pathNodes.map(function (node) {
|
||
return node.value
|
||
})
|
||
this.pathLabels = this.pathNodes.map(function (node) {
|
||
return node.label
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 初始化该数据下的子级
|
||
* 内部通过递归生成 CascaderNode 实例，即子级
|
||
*/
|
||
CascaderNode.prototype.initChildren = function initChildren() {
|
||
var _this = this
|
||
var config = this.config
|
||
var childrenKey = config.children
|
||
var childrenData = this.data[childrenKey]
|
||
this.hasChildren = Array.isArray(childrenData)
|
||
this.children = (childrenData || []).map(function (child) {
|
||
return new CascaderNode(child, config, _this)
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 计算路径
|
||
*/
|
||
CascaderNode.prototype.calculatePathNodes = function calculatePathNodes() {
|
||
var nodes = [this]
|
||
var parent = this.parent
|
||
|
||
while (parent) {
|
||
nodes.unshift(parent)
|
||
parent = parent.parent
|
||
}
|
||
return nodes
|
||
}
|
||
|
||
/**
|
||
* 获取该项的路径（包含父级+）
|
||
*/
|
||
CascaderNode.prototype.getPath = function getPath() {
|
||
return this.path
|
||
}
|
||
|
||
/**
|
||
* 获取该项的路径（不包含父级）
|
||
*/
|
||
CascaderNode.prototype.getValue = function getPath() {
|
||
return this.value
|
||
}
|
||
|
||
/**
|
||
* 多选 - 父级选中操作，让所有子级选中
|
||
* @param {Boolean} checked
|
||
*/
|
||
CascaderNode.prototype.onParentCheck = function onParentCheck(checked) {
|
||
var child = this.children.length ? this.children : this
|
||
this.checked = checked
|
||
this.indeterminate = false
|
||
this.doAllCheck(child, checked)
|
||
}
|
||
|
||
/**
|
||
* 多选 - 父级选中时，子级全选
|
||
* @param {Array} child
|
||
* @param {Boolean} checked
|
||
*/
|
||
CascaderNode.prototype.doAllCheck = function doAllCheck(child, checked) {
|
||
var _this = this
|
||
if (Array.isArray(child) && child.length) {
|
||
child.forEach(function (c) {
|
||
c.checked = checked
|
||
c.indeterminate = false
|
||
_this.doAllCheck(c.children, checked)
|
||
})
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 多选 - 子级选中，操作父级
|
||
* @param {*} checked
|
||
*/
|
||
CascaderNode.prototype.onChildCheck = function onChildCheck(checked) {
|
||
this.checked = checked
|
||
var parent = this.parent
|
||
var isChecked = parent.children.every(function (child) {
|
||
return child.checked
|
||
})
|
||
this.setCheckState(this.parent, isChecked);
|
||
}
|
||
|
||
/**
|
||
* 设置父级相应的状态
|
||
* 当该项有同级，且都没有选中，父级为 无选中 状态： 口
|
||
* 当该项有同级，且同级的所有数据都为选中时，父级为 选中 状态：√
|
||
* 当该项有同级，但同级中有且只有一项没有被选中，父级为 半选中 状态： -
|
||
* @param {Object} parent
|
||
* @param {Boolean} isChecked
|
||
*/
|
||
CascaderNode.prototype.setCheckState = function setCheckState(parent, isChecked) {
|
||
parent.checked = isChecked
|
||
var totalNum = parent.children.length;
|
||
var checkedNum = parent.children.reduce(function (c, p) {
|
||
var num = p.checked ? 1 : p.indeterminate ? 0.5 : 0;
|
||
return c + num;
|
||
}, 0);
|
||
parent.indeterminate = checkedNum !== totalNum && checkedNum > 0;
|
||
parent.parent && this.setCheckState(parent.parent, isChecked)
|
||
}
|
||
|
||
return CascaderNode
|
||
}()
|
||
|
||
/**
|
||
* eo_cascader 生成级联选择器
|
||
* 绑定相关事件、操作数据、渲染选择器、 回显选中列表
|
||
*/
|
||
var eo_cascader = function () {
|
||
// 默认配置
|
||
var defaultConfig = {
|
||
disabled: 'disabled',
|
||
emitPath: true,
|
||
value: 'id',
|
||
label: 'label',
|
||
children: 'children'
|
||
}
|
||
/**
|
||
* 级联选择器构造函数
|
||
* @param {Array} data
|
||
* @param {Object} config
|
||
*/
|
||
function EoCascader(data, config) {
|
||
this.config = Object.assign(defaultConfig, config) || null
|
||
this.multiple = config.multiple // 是否多选
|
||
this.separator = config.separator // 自定义数据之间分隔符
|
||
this.data = data // 原始数据
|
||
this.clearable = config.clearable // 是否可一键清空
|
||
this.panelShowState = false // 控制级联选择器显示
|
||
this.storageChecked = {} // 存储已选中的数据项
|
||
this.checkedText = [] // 选中的文本
|
||
this.checkedID = [] // 选中的ID
|
||
this.ele = document.getElementById(config.elementID) // DOM容器
|
||
this.panelWrap = this.initPanel() // 级联选择器DOM容器
|
||
this.checkedWrap = this.initCheckedWrap() // 回显选中列表DOM容器
|
||
this.checkedCallback = config.checkedCallback || (() => {});
|
||
this.initNodes(data)
|
||
this.initEvents()
|
||
}
|
||
|
||
/**
|
||
* 事件绑定
|
||
*/
|
||
EoCascader.prototype.initEvents = function initEvents(e) {
|
||
this.ele.addEventListener('click', this.bindCascaderClick.bind(this))
|
||
document.body.addEventListener('click', this.bindBodyClick.bind(this), true)
|
||
if(this.clearable) {
|
||
this.ele.addEventListener('mouseover', this.bindCascaderHover.bind(this))
|
||
this.ele.addEventListener('mouseout', this.bindCascaderOut.bind(this))
|
||
}
|
||
}
|
||
|
||
/**
|
||
* body点击隐藏级联面板
|
||
*/
|
||
EoCascader.prototype.bindBodyClick = function bindCascaderClick(e) {
|
||
if(e.target.tagName !== 'BODY') return
|
||
this.panelShowState = false
|
||
this.ele.className = 'cascader-wrap'
|
||
}
|
||
|
||
/**
|
||
* 点击容器控制切换级联面板显示
|
||
*/
|
||
EoCascader.prototype.bindCascaderClick = function bindCascaderClick(e) {
|
||
e.stopPropagation();
|
||
if(e.target.id !== this.ele.id ) return
|
||
this.panelShowState = !this.panelShowState
|
||
this.ele.className = this.panelShowState? 'cascader-wrap is-show': 'cascader-wrap'
|
||
}
|
||
|
||
/**
|
||
* 当且仅当 clearable 为 true 时绑定
|
||
* 鼠标移入容器，显示一键清空按钮
|
||
*/
|
||
EoCascader.prototype.bindCascaderHover = function bindCascaderHover(e) {
|
||
e.stopPropagation();
|
||
if(e.target.id !== this.ele.id && e.target.className !== 'eo-clear-btn' ) return
|
||
if(JSON.stringify(this.storageChecked) !== '{}') {
|
||
this.ele.className = this.panelShowState? 'cascader-wrap is-show is-clear': 'cascader-wrap is-clear'
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 当且仅当 clearable 为 true 时绑定
|
||
* 鼠标移出容器，隐藏一键清空按钮
|
||
*/
|
||
EoCascader.prototype.bindCascaderOut = function bindCascaderOut(e) {
|
||
e.stopPropagation();
|
||
if(e.target.id !== this.ele.id) return
|
||
this.ele.className = this.panelShowState? 'cascader-wrap is-show': 'cascader-wrap'
|
||
}
|
||
|
||
/**
|
||
* 动态生成级联面板DOM容器
|
||
*/
|
||
EoCascader.prototype.initPanel = function initPanel() {
|
||
var panel = document.createElement('div')
|
||
panel.className = 'eo-cascader-panel'
|
||
return panel
|
||
}
|
||
|
||
/**
|
||
* 动态生成回显选中列表DOM容器
|
||
*/
|
||
EoCascader.prototype.initCheckedWrap = function initCheckedWrap() {
|
||
var checkedWrap = document.createElement('div')
|
||
checkedWrap.className = 'eo-checked-wrap'
|
||
return checkedWrap
|
||
}
|
||
|
||
/**
|
||
* 动态生成一键清空按钮
|
||
*/
|
||
EoCascader.prototype.initClearDom = function initClearDom() {
|
||
var clearBtn = document.createElement('i')
|
||
clearBtn.className = 'eo-clear-btn'
|
||
clearBtn.innerHTML = 'x'
|
||
var _this = this
|
||
// 绑定事件，初始化所有数据，重新渲染级联面板
|
||
clearBtn.addEventListener('click', function(e) {
|
||
e.stopPropagation();
|
||
_this.storageChecked = {}
|
||
_this.checkedCallback();
|
||
_this.config.checkedValue = null
|
||
_this.checkedText = []
|
||
_this.checkedID = []
|
||
_this.initNodes(_this.data)
|
||
_this.initCheckedLi()
|
||
_this.panelWrap.style.top = _this.ele.offsetHeight + 2 + 'px'
|
||
})
|
||
return clearBtn
|
||
}
|
||
|
||
/**
|
||
* 通过 CascaderNode 适配器对原始数据进行改造，并赋值给当前构造函数的 nodes 对象
|
||
* @param {Array} data 用户传入的原始数据
|
||
*/
|
||
EoCascader.prototype.initNodes = function initNodes(data) {
|
||
var _this = this
|
||
this.nodes = data.map(function (nodeData) {
|
||
// 访问适配器
|
||
return new cascader_node(nodeData, _this.config)
|
||
})
|
||
// 级联面板
|
||
this.menus = [this.nodes]
|
||
// 当为编辑页面时，往往需要回显上次提交的数据，即，
|
||
// 如果存在 checkedValue
|
||
// 那么调用 findChecked 方法，通过传入的已选 ID，渲染级联面板、回显列表
|
||
// 反之，根据初始数据正常渲染即可
|
||
this.config.checkedValue ? this.findChecked(this.config.checkedValue) : this.createNodes(this.menus)
|
||
// 如果可一键清空，动态添加清空按钮
|
||
this.clearable && this.ele.appendChild(this.initClearDom())
|
||
}
|
||
|
||
/**
|
||
* @param {Object} currentMenu 级联面板中，当前的点击项
|
||
* 点击同级项时，通过操作 menus，使对应的子级进行渲染
|
||
*/
|
||
EoCascader.prototype.renderNodes = function (currentMenu) {
|
||
// 操作 menus
|
||
var menus = this.menus.slice(0, currentMenu.level)
|
||
currentMenu.children.length && menus.push(currentMenu.children)
|
||
this.menus = menus
|
||
var wrap = this.panelWrap
|
||
var wrapChild = wrap.children
|
||
// 操作DOM
|
||
for (let j = currentMenu.level; j < wrap.children.length; j++) {
|
||
wrap.removeChild(wrapChild[j])
|
||
j = j - 1
|
||
}
|
||
return menus
|
||
}
|
||
|
||
/**
|
||
* 数据驱动的方式，通过 menus 渲染DOM
|
||
* 每次操作 menus，增删都需要修改 menus，进而再次调用改方法进行渲染
|
||
* @param {Array} menus 级联面板数据
|
||
*/
|
||
EoCascader.prototype.createNodes = function (menus) {
|
||
var wrap = this.panelWrap
|
||
wrap.innerHTML = ''
|
||
var _this = this
|
||
|
||
for (let i = 0; i < menus.length; i++) {
|
||
var menu = document.createElement('div')
|
||
menu.className = 'eo-cascader-menu'
|
||
var ul = document.createElement('ul')
|
||
var menusList = menus[i];
|
||
for (let k = 0; k < menusList.length; k++) {
|
||
var li = document.createElement('li')
|
||
if(menusList[k].children.length) li.className = 'has-child'
|
||
// 当且仅当多选时 创建 label checkbox
|
||
if(_this.multiple) {
|
||
var label = document.createElement('label')
|
||
var checkbox = document.createElement('input')
|
||
checkbox.type = 'checkbox'
|
||
checkbox.checked = menusList[k].checked
|
||
checkbox.setAttribute('uid', menusList[k].uid)
|
||
|
||
checkbox.className = menusList[k].indeterminate ? 'is-indeterminate' : ''
|
||
|
||
|
||
checkbox.addEventListener('click', _this.bindClickEvent.bind(checkbox,
|
||
_this, _this.handleCheckCb)
|
||
)
|
||
|
||
label.appendChild(checkbox)
|
||
li.appendChild(label)
|
||
}
|
||
// 创建文本
|
||
var span = document.createElement('span')
|
||
span.innerHTML = menusList[k]['label']
|
||
span.setAttribute('uid', menusList[k].uid)
|
||
li.addEventListener('click', _this.bindClickEvent.bind(span, _this, _this.handleDanxuanCb))
|
||
// 将 label 及 文本追加到 li
|
||
li.appendChild(span)
|
||
ul.appendChild(li)
|
||
}
|
||
menu.appendChild(ul)
|
||
wrap.appendChild(menu)
|
||
wrap.style.top = _this.ele.offsetHeight + 2 + 'px'
|
||
}
|
||
this.ele.appendChild(wrap)
|
||
}
|
||
|
||
/**
|
||
* 点击 checkbox 和 文本回调函数
|
||
* @param {this} _this 当前实例
|
||
* @param {Function} cb 回调函数
|
||
* 当且仅当点击 checkbox 时，传入 cb
|
||
*/
|
||
EoCascader.prototype.bindClickEvent = function bindClickEvent(_this, cb) {
|
||
var uid = this.getAttribute('uid')
|
||
var _thisMenu = _this.menus.flat(Infinity).filter(function (menu) {
|
||
return menu.uid == uid
|
||
})
|
||
typeof cb === 'function' && cb.call(this, _thisMenu, _this, this.checked)
|
||
_this.createNodes(_this.renderNodes(_thisMenu[0]))
|
||
}
|
||
|
||
EoCascader.prototype.handleDanxuanCb = function handleDanxuanCb(currentMenu, _this) {
|
||
if(_this.multiple) return
|
||
var child = currentMenu[0].children
|
||
if(!child.length) {
|
||
_this.storageChecked = {};
|
||
_this.storageChecked[currentMenu[0].uid] = {};
|
||
_this.storageChecked[currentMenu[0].uid].pathLabels = currentMenu[0].pathLabels
|
||
_this.storageChecked[currentMenu[0].uid].path = currentMenu[0].path
|
||
_this.checkedWrap.innerHTML = ''
|
||
// 渲染回显列表
|
||
_this.initCheckedLi()
|
||
_this.checkedCallback();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 点击 checkbox 触发回调
|
||
* 内部对父级、子级选中状态进行修改
|
||
* 同时对选中的数据进行存储，调用渲染回显列表函数
|
||
* @param {Array} currentMenu 当前点击的面板项
|
||
* @param {this} _this
|
||
* @param {Boolean} isChecked
|
||
*/
|
||
EoCascader.prototype.handleCheckCb = function handleCheckCb(currentMenu, _this, isChecked) {
|
||
// 如果当前点击项为第一级，那么让所有子级都选中
|
||
// 如果当前项有父级，设置父级选中状态
|
||
if (currentMenu[0].level !== 1) {
|
||
currentMenu[0].onChildCheck(isChecked)
|
||
}
|
||
currentMenu[0].onParentCheck(isChecked)
|
||
|
||
// 存储当前选中状态
|
||
currentMenu[0].children.length ?
|
||
_this.showReviewCheckedOb(currentMenu[0]) :
|
||
_this.handleReviewCheckedOb(currentMenu[0])
|
||
|
||
_this.checkedWrap.innerHTML = ''
|
||
// 渲染回显列表
|
||
_this.initCheckedLi()
|
||
}
|
||
|
||
EoCascader.prototype.initCheckedLi = function () {
|
||
var ul = document.createElement('ul')
|
||
var _this = this
|
||
if(JSON.stringify(this.storageChecked) === '{}') {
|
||
return this.checkedWrap.innerHTML = ''
|
||
}
|
||
for (const key in this.storageChecked) {
|
||
if (this.storageChecked.hasOwnProperty(key)) {
|
||
var li = document.createElement('li')
|
||
var p = document.createElement('p')
|
||
var i = document.createElement('i')
|
||
li.setAttribute('uid', key)
|
||
p.innerHTML = this.storageChecked[key].pathLabels.join(_this.separator)
|
||
i.innerHTML = 'x'
|
||
|
||
i.addEventListener('click', function () {
|
||
var uidd = this.parentElement.getAttribute('uid')
|
||
delete _this.storageChecked[uidd]
|
||
var fn = function (parent) {
|
||
for (let i = 0; i < parent.length; i++) {
|
||
if (parent[i].children.length) {
|
||
fn(parent[i].children)
|
||
} else {
|
||
if (parent[i].uid == uidd) {
|
||
_this.handleCheckCb([parent[i]], _this, false)
|
||
_this.createNodes(_this.menus)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
fn(_this.nodes)
|
||
})
|
||
li.appendChild(p)
|
||
li.appendChild(i)
|
||
ul.appendChild(li)
|
||
_this.checkedWrap.appendChild(ul)
|
||
}
|
||
}
|
||
this.ele.appendChild(this.checkedWrap)
|
||
}
|
||
|
||
/**
|
||
* 根据编辑页面传入的已选ID数组，修改面板数据 menus
|
||
* @param {Array} uidArr
|
||
*/
|
||
EoCascader.prototype.findChecked = function (uidArr) {
|
||
var _this = this
|
||
// 获取上次已经提交过的三级标签
|
||
var checkedNodesMatch = []
|
||
var nodes = this.nodes
|
||
var recursionFn = function (parent) {
|
||
for (let i = 0; i < parent.length; i++) {
|
||
if (parent[i].children.length) {
|
||
recursionFn(parent[i].children)
|
||
} else {
|
||
if (uidArr.includes(parent[i].uid)) {
|
||
parent[i].checked = true
|
||
_this.handleCheckCb([parent[i]], _this, true)
|
||
checkedNodesMatch.push(parent[i])
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
recursionFn(nodes)
|
||
|
||
var menus = []
|
||
var getMenusMatch = function (menu) {
|
||
if (menu.parent) {
|
||
menus.push(menu.parent.children)
|
||
return getMenusMatch(menu.parent)
|
||
}
|
||
}
|
||
|
||
getMenusMatch(checkedNodesMatch[0])
|
||
|
||
menus.reverse().forEach(function (m) {
|
||
_this.menus.push(m)
|
||
})
|
||
_this.createNodes(this.menus)
|
||
}
|
||
|
||
/**
|
||
* 递归的找到当前 node 下最后一个子级，并将其存入 storageChecked 中
|
||
* @param {Object} node
|
||
*/
|
||
EoCascader.prototype.showReviewCheckedOb = function (node) {
|
||
if (!node.children.length) {
|
||
this.handleReviewCheckedOb(node)
|
||
} else {
|
||
for (let k = 0; k < node.children.length; k++) {
|
||
this.showReviewCheckedOb(node.children[k])
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 如果当前 node 已选中，存入 storageChecked 中，反之删除 storageChecked 中的当前 node
|
||
* @param {Object} node
|
||
*/
|
||
EoCascader.prototype.handleReviewCheckedOb = function (node) {
|
||
if (node.checked) {
|
||
this.storageChecked[node.uid] = {};
|
||
this.storageChecked[node.uid].pathLabels = node.pathLabels;
|
||
this.storageChecked[node.uid].path = node.path;
|
||
} else {
|
||
delete this.storageChecked[node.uid]
|
||
}
|
||
this.checkedCallback();
|
||
}
|
||
|
||
/**
|
||
* 接口：获取所有选中的文本
|
||
*/
|
||
EoCascader.prototype.getCheckedByText = function () {
|
||
this.checkedText = []
|
||
for (const key in this.storageChecked) {
|
||
if (this.storageChecked.hasOwnProperty(key)) {
|
||
this.checkedText.push(this.storageChecked[key].pathLabels.join(this.separator))
|
||
}
|
||
}
|
||
return this.checkedText
|
||
}
|
||
|
||
/**
|
||
* 接口：获取所有选中的ID
|
||
*/
|
||
EoCascader.prototype.getCheckedByID = function () {
|
||
this.checkedID = []
|
||
for (const key in this.storageChecked) {
|
||
if (this.storageChecked.hasOwnProperty(key)) {
|
||
this.checkedID.push(key - 0)
|
||
}
|
||
}
|
||
return this.checkedID
|
||
}
|
||
|
||
/**
|
||
* 接口：获取所有层级id
|
||
*/
|
||
EoCascader.prototype.getCheckedPaths = function () {
|
||
this.checkedPaths = []
|
||
for (const key in this.storageChecked) {
|
||
if (this.storageChecked.hasOwnProperty(key)) {
|
||
this.checkedPaths.push(this.storageChecked[key].path)
|
||
}
|
||
}
|
||
return this.checkedPaths
|
||
}
|
||
|
||
return EoCascader
|
||
}()
|
||
|
||
window.eo_cascader = eo_cascader
|
||
|
||
}(window))
|