| | |
|---|
| | | /** 级联选择器模块 date:2020-03-11 License By http://easyweb.vip */ |
|---|
| | | layui.define(['jquery'], function (exports) { |
|---|
| | | var $ = layui.jquery; |
|---|
| | | if ($('#ew-css-cascader').length <= 0) { |
|---|
| | | layui.link(layui.cache.base + 'cascader/cascader.css'); |
|---|
| | | } |
|---|
| | | var onVisibleChangeList = []; // 所有展开和关闭回调 |
|---|
| | | |
|---|
| | | var cascader = { |
|---|
| | | /* 初始化 */ |
|---|
| | | render: function (param) { |
|---|
| | | // 默认参数 |
|---|
| | | var defaultOptions = { |
|---|
| | | renderFormat: function (labels, values) { |
|---|
| | | return labels.join(' / '); |
|---|
| | | }, |
|---|
| | | clearable: true, |
|---|
| | | clearAllActive: false, |
|---|
| | | disabled: false, |
|---|
| | | trigger: 'click', |
|---|
| | | changeOnSelect: false, |
|---|
| | | filterable: false, |
|---|
| | | notFoundText: '没有匹配数据' |
|---|
| | | }; |
|---|
| | | param = $.extend(defaultOptions, param); |
|---|
| | | var elem = param.elem; // 目标元素 |
|---|
| | | var mDataList = param.data; // 数据 |
|---|
| | | var renderFormat = param.renderFormat; // 选择后用于展示的函数 |
|---|
| | | var clearable = param.clearable; // 是否支持清除 |
|---|
| | | var clearAllActive = param.clearAllActive; // 清除所有选中 |
|---|
| | | var disabled = param.disabled; // 是否禁用 |
|---|
| | | var trigger = param.trigger; // 次级菜单触发方式 |
|---|
| | | var changeOnSelect = param.changeOnSelect; // 是否点击每项选项值都改变 |
|---|
| | | var reqData = param.reqData; // 自定义获取数据的方法 |
|---|
| | | var filterable = param.filterable; // 是否开启搜索 |
|---|
| | | var notFoundText = param.notFoundText; // 搜索列表为空时显示的内容 |
|---|
| | | var reqSearch = param.reqSearch; // 自定义搜索的方法 |
|---|
| | | var onChange = param.onChange; // 数据选择完成的回调 |
|---|
| | | var onVisibleChange = param.onVisibleChange; // 展开和关闭弹窗时触发 |
|---|
| | | var itemHeight = param.itemHeight; // 下拉列表每一项高度 |
|---|
| | | var isFirst = true; |
|---|
| | | // 如果渲染过重新渲染 |
|---|
| | | var $elem = $(elem); |
|---|
| | | if ($elem.next().hasClass('ew-cascader-group')) { |
|---|
| | | $elem.next().remove(); |
|---|
| | | for (var i = 0; i < onVisibleChangeList.length; i++) { |
|---|
| | | if (elem == onVisibleChangeList[i].elem) { |
|---|
| | | onVisibleChangeList.splice(i, 1); |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | onVisibleChangeList.push({elem: elem, onVisibleChange: onVisibleChange}); |
|---|
| | | $elem.addClass('ew-cascader-hide'); |
|---|
| | | var htmlStr = '<div class="ew-cascader-group">'; |
|---|
| | | htmlStr += ' <div class="ew-cascader-input-group">'; |
|---|
| | | htmlStr += ' <input class="layui-input ew-cascader-input" readonly/>'; |
|---|
| | | htmlStr += ' <input class="layui-input ew-cascader-input-search"/>'; |
|---|
| | | htmlStr += ' <i class="layui-icon layui-icon-triangle-d ew-icon-arrow"></i>'; |
|---|
| | | htmlStr += ' <i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop ew-icon-loading"></i>'; |
|---|
| | | htmlStr += ' <i class="layui-icon layui-icon-close-fill ew-icon-clear"></i>'; |
|---|
| | | htmlStr += ' </div>'; |
|---|
| | | htmlStr += ' <div class="ew-cascader-dropdown layui-anim layui-anim-upbit"></div>'; |
|---|
| | | htmlStr += ' <div class="ew-cascader-search-list"></div>'; |
|---|
| | | htmlStr += ' </div>'; |
|---|
| | | $elem.after(htmlStr); |
|---|
| | | |
|---|
| | | var $cascader = $elem.next(); |
|---|
| | | var $inputGroup = $cascader.children('.ew-cascader-input-group'); |
|---|
| | | var $input = $inputGroup.children('.ew-cascader-input'); |
|---|
| | | var $inputSearch = $inputGroup.children('.ew-cascader-input-search'); |
|---|
| | | var $dropdown = $cascader.children('.ew-cascader-dropdown'); |
|---|
| | | var $search = $cascader.children('.ew-cascader-search-list'); |
|---|
| | | |
|---|
| | | $input.attr('placeholder', $elem.attr('placeholder')); |
|---|
| | | disabled && $input.addClass('layui-disabled'); |
|---|
| | | |
|---|
| | | // 构建渲染后的实例 |
|---|
| | | var _instance = { |
|---|
| | | data: mDataList, |
|---|
| | | getData: function () { |
|---|
| | | return mDataList; |
|---|
| | | }, |
|---|
| | | /* 展开 */ |
|---|
| | | open: function () { |
|---|
| | | if ($cascader.hasClass('ew-cascader-open')) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | cascader.hideAll(); |
|---|
| | | $cascader.addClass('ew-cascader-open'); |
|---|
| | | cascader.checkWidthPosition($dropdown); // 溢出屏幕判断 |
|---|
| | | cascader.checkHeightPosition($dropdown); // 溢出屏幕判断 |
|---|
| | | onVisibleChange && onVisibleChange(true); // 展开回调 |
|---|
| | | if (filterable) { // 如果开启搜索功能让输入框获取焦点 |
|---|
| | | $inputGroup.addClass('show-search'); |
|---|
| | | $inputSearch.focus(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | /* 关闭 */ |
|---|
| | | hide: function () { |
|---|
| | | if (!$cascader.hasClass('ew-cascader-open')) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | $cascader.removeClass('ew-cascader-open'); |
|---|
| | | $cascader.removeClass('dropdown-show-top'); |
|---|
| | | $cascader.removeClass('dropdown-show-left'); |
|---|
| | | cascader.hideAllSearch(); |
|---|
| | | onVisibleChange && onVisibleChange(false); // 关闭回调 |
|---|
| | | }, |
|---|
| | | /* 移除加载中的状态*/ |
|---|
| | | removeLoading: function () { |
|---|
| | | $cascader.removeClass('show-loading'); |
|---|
| | | $dropdown.find('.ew-cascader-dropdown-list-item').removeClass('show-loading'); |
|---|
| | | }, |
|---|
| | | /* 设置禁用状态 */ |
|---|
| | | setDisabled: function (dis) { |
|---|
| | | disabled = dis; |
|---|
| | | if (dis) { |
|---|
| | | $input.addClass('layui-disabled'); |
|---|
| | | _instance.hide(); |
|---|
| | | } else { |
|---|
| | | $input.removeClass('layui-disabled'); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | /* 获取值*/ |
|---|
| | | getValue: function () { |
|---|
| | | return $elem.val(); |
|---|
| | | }, |
|---|
| | | /* 获取label */ |
|---|
| | | getLabel: function () { |
|---|
| | | return $input.val(); |
|---|
| | | }, |
|---|
| | | /* 设置值*/ |
|---|
| | | setValue: function (value) { |
|---|
| | | if (value == undefined || value == null || !value.toString()) { |
|---|
| | | $input.val(''); |
|---|
| | | $elem.val(''); |
|---|
| | | if (clearAllActive || changeOnSelect) { // 清除所有 |
|---|
| | | $dropdown.children('.ew-cascader-dropdown-list').not(':first').remove(); |
|---|
| | | $dropdown.find('.ew-cascader-dropdown-list-item').removeClass('active'); |
|---|
| | | cascader.checkWidthPosition($dropdown); // 溢出屏幕判断 |
|---|
| | | } else { // 仅清除最后一项 |
|---|
| | | $dropdown.find('.ew-cascader-dropdown-list-item.is-last').removeClass('active'); |
|---|
| | | } |
|---|
| | | $inputGroup.removeClass('show-clear'); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | value = value.toString().split(','); |
|---|
| | | var labels = []; |
|---|
| | | |
|---|
| | | // 通过递归控制异步加载回显默认值对应label时的请求顺序 |
|---|
| | | function doReqData(tValues, data, i, values, callback) { |
|---|
| | | if (!tValues && data) { |
|---|
| | | tValues = []; |
|---|
| | | setData(data); |
|---|
| | | } else if (tValues && data && data.children) { |
|---|
| | | setData(data.children); |
|---|
| | | } else { // 数据不存在时才去请求数据 |
|---|
| | | $cascader.addClass('show-loading'); |
|---|
| | | reqData(tValues, function (dataList) { |
|---|
| | | if (tValues) { |
|---|
| | | data.children = dataList; |
|---|
| | | } else { |
|---|
| | | mDataList = dataList; |
|---|
| | | tValues = []; |
|---|
| | | } |
|---|
| | | setData(dataList); |
|---|
| | | }, data); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function setData(dataList) { |
|---|
| | | for (var j = 0; j < dataList.length; j++) { |
|---|
| | | if (dataList[j].value == values[i]) { |
|---|
| | | labels[i] = dataList[j].label; |
|---|
| | | tValues[i] = dataList[j].value; |
|---|
| | | if (i < values.length - 1) { |
|---|
| | | doReqData(tValues, dataList[j], i + 1, values, callback); |
|---|
| | | } else { |
|---|
| | | callback(); |
|---|
| | | } |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | doReqData(undefined, mDataList, 0, value, function () { |
|---|
| | | $cascader.removeClass('show-loading'); |
|---|
| | | $input.val(renderFormat(labels, value)); |
|---|
| | | $elem.val(value.join(',')); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 回显初始值 |
|---|
| | | _instance.setValue($elem.val()); |
|---|
| | | |
|---|
| | | // 点击展开/关闭下拉列表 |
|---|
| | | $inputGroup.off('click').on('click', function (e) { |
|---|
| | | // 判断是否是禁用状态 |
|---|
| | | if ($input.hasClass('layui-disabled')) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | // 判断是否是加载中状态 |
|---|
| | | if ($cascader.hasClass('show-loading')) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | // 关闭 |
|---|
| | | if ($cascader.hasClass('ew-cascader-open')) { |
|---|
| | | if (!filterable) { // 是否开启搜索功能 |
|---|
| | | _instance.hide(); |
|---|
| | | } |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | // 展开 |
|---|
| | | if (isFirst) { // 第一次展开渲染第一列数据 |
|---|
| | | if (mDataList) { |
|---|
| | | isFirst = false; |
|---|
| | | renderList($dropdown, mDataList, undefined, itemHeight); |
|---|
| | | initLabel(); |
|---|
| | | _instance.open(); |
|---|
| | | } else { // 异步方式 |
|---|
| | | $cascader.addClass('show-loading'); |
|---|
| | | reqData(undefined, function (dataList) { |
|---|
| | | isFirst = false; |
|---|
| | | mDataList = dataList; |
|---|
| | | renderList($dropdown, dataList, undefined, itemHeight); |
|---|
| | | $cascader.removeClass('show-loading'); |
|---|
| | | _instance.open(); |
|---|
| | | }, undefined); |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | initLabel(); |
|---|
| | | _instance.open(); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 回显上次选中项 |
|---|
| | | function initLabel() { |
|---|
| | | var value = $elem.val().toString(); |
|---|
| | | if (value) { |
|---|
| | | value = value.split(','); |
|---|
| | | for (var i = 0; i < value.length; i++) { |
|---|
| | | var $item = $dropdown.children('.ew-cascader-dropdown-list').eq(i).children('.ew-cascader-dropdown-list-item[data-value="' + value[i] + '"]'); |
|---|
| | | if (i == value.length - 1) { |
|---|
| | | $item.addClass('active'); |
|---|
| | | } else { |
|---|
| | | $item.trigger('click'); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | _instance.setValue(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | $inputGroup.children('.ew-icon-arrow').off('click').on('click', function (e) { |
|---|
| | | if ($cascader.hasClass('ew-cascader-open')) { |
|---|
| | | _instance.hide(); |
|---|
| | | e.stopPropagation(); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 点击渲染次级列表 |
|---|
| | | $dropdown.off('click').on('click', '.ew-cascader-dropdown-list-item', function () { |
|---|
| | | var $this = $(this); |
|---|
| | | // 防止重复点击 |
|---|
| | | if ($this.hasClass('active')) { |
|---|
| | | if ($this.hasClass('is-last')) { |
|---|
| | | _instance.hide(); |
|---|
| | | } |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | // 判断是否是禁用状态 |
|---|
| | | if ($this.hasClass('ew-cascader-disabled')) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | // 判断是否是加载中状态 |
|---|
| | | if ($this.parent().parent().find('.ew-cascader-dropdown-list-item').hasClass('show-loading')) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var index = $this.data('index').toString(); |
|---|
| | | var indexList = index.split('-'); |
|---|
| | | var data = mDataList[parseInt(indexList[0])], values = [data.value], labels = [data.label]; |
|---|
| | | for (var i = 1; i < indexList.length; i++) { |
|---|
| | | data = data.children[parseInt(indexList[i])]; |
|---|
| | | values[i] = data.value; |
|---|
| | | labels[i] = data.label; |
|---|
| | | } |
|---|
| | | if (data.haveChildren) { // 非最后一项 |
|---|
| | | if (data.children) { // 数据方式或已经异步加载直接渲染 |
|---|
| | | $this.parent().nextAll().remove(); |
|---|
| | | cascader.checkWidthPosition($dropdown); // 检查是否溢出屏幕 |
|---|
| | | activeThis(); |
|---|
| | | renderList($dropdown, data.children, index, itemHeight); |
|---|
| | | } else { // 异步方式先请求数据再渲染 |
|---|
| | | $this.addClass('show-loading'); |
|---|
| | | reqData(values, function (dataList) { |
|---|
| | | data.children = dataList; |
|---|
| | | $this.parent().nextAll().remove(); |
|---|
| | | cascader.checkWidthPosition($dropdown); // 检查是否溢出屏幕 |
|---|
| | | activeThis(); |
|---|
| | | renderList($dropdown, dataList, index, itemHeight); |
|---|
| | | $this.removeClass('show-loading'); |
|---|
| | | }, data); |
|---|
| | | } |
|---|
| | | // 点击非最后一项也触发选中 |
|---|
| | | if (changeOnSelect) { |
|---|
| | | activeThis(); |
|---|
| | | doChange(); |
|---|
| | | } |
|---|
| | | } else { // 最后一项 |
|---|
| | | $this.parent().nextAll().remove(); |
|---|
| | | activeThis(); |
|---|
| | | doChange(); |
|---|
| | | _instance.hide(); // 选中后关闭 |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* 选中当前 */ |
|---|
| | | function activeThis() { |
|---|
| | | $this.parent().children('.ew-cascader-dropdown-list-item').removeClass('active'); |
|---|
| | | $this.addClass('active'); |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* 触发选中回调 */ |
|---|
| | | function doChange() { |
|---|
| | | $input.val(renderFormat(labels, values)); // 赋值label |
|---|
| | | $elem.val(values.join(',')); // 赋值value |
|---|
| | | $elem.removeClass('layui-form-danger'); // 移除表单验证 |
|---|
| | | onChange && onChange(values, data); // 选中回调 |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // hover方式触发 |
|---|
| | | if (trigger == 'hover') { |
|---|
| | | $dropdown.off('mouseenter').on('mouseenter', '.ew-cascader-dropdown-list-item', function () { |
|---|
| | | if (!$(this).hasClass('is-last')) { |
|---|
| | | $(this).trigger('click'); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 开启清除功能 |
|---|
| | | if (clearable) { |
|---|
| | | $inputGroup.off('mouseenter').on('mouseenter', function () { |
|---|
| | | if ($elem.val().toString() && !$input.hasClass('layui-disabled')) { |
|---|
| | | $(this).addClass('show-clear'); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | $inputGroup.off('mouseleave').on('mouseleave', function () { |
|---|
| | | $(this).removeClass('show-clear'); |
|---|
| | | }); |
|---|
| | | // 点击清除 |
|---|
| | | $inputGroup.children('.ew-icon-clear').off('click').on('click', function (e) { |
|---|
| | | e.stopPropagation(); |
|---|
| | | _instance.setValue(); |
|---|
| | | onChange && onChange(); // 选中回调 |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 开启搜索功能 |
|---|
| | | if (filterable) { |
|---|
| | | $inputSearch.off('input').on('input', function () { |
|---|
| | | var value = $(this).val(); |
|---|
| | | if (!value) { |
|---|
| | | $cascader.removeClass('show-search-list'); |
|---|
| | | $inputGroup.removeClass('have-value'); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | $inputGroup.addClass('have-value'); |
|---|
| | | if (reqSearch) { // 异步搜索 |
|---|
| | | reqSearch(value, function (rsList) { |
|---|
| | | // 渲染搜索结果 |
|---|
| | | renderSearchList($search, rsList, notFoundText); |
|---|
| | | $cascader.addClass('show-search-list'); |
|---|
| | | }, mDataList); |
|---|
| | | } else { // 前端搜索 |
|---|
| | | var allList = [], rsList = []; |
|---|
| | | |
|---|
| | | // 把树形list转一维list |
|---|
| | | function toAllList(arr, label, value, disabled) { |
|---|
| | | for (var i = 0; i < arr.length; i++) { |
|---|
| | | var item = arr[i]; |
|---|
| | | item.__label = label ? label + ' / ' + item.label : item.label; |
|---|
| | | item.__value = value ? value + ',' + item.value : item.value; |
|---|
| | | item.__disabled = item.disabled ? item.disabled : disabled; |
|---|
| | | |
|---|
| | | if (item.children && item.children.length) { |
|---|
| | | toAllList(item.children, item.__label, item.__value, item.__disabled); |
|---|
| | | delete item.__label; |
|---|
| | | delete item.__value; |
|---|
| | | } else { |
|---|
| | | allList.push({ |
|---|
| | | label: item.__label, |
|---|
| | | value: item.__value, |
|---|
| | | disabled: item.__disabled |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | toAllList(mDataList); |
|---|
| | | |
|---|
| | | // 过滤数据 |
|---|
| | | for (var i = 0; i < allList.length; i++) { |
|---|
| | | var item = allList[i]; |
|---|
| | | if (item.label.indexOf(value) > -1) { |
|---|
| | | item.label = item.label.replace(new RegExp(value, 'g'), '<span class="search-keyword">' + value + '</span>'); |
|---|
| | | rsList.push(item); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // 渲染搜索结果 |
|---|
| | | renderSearchList($search, rsList, notFoundText); |
|---|
| | | $cascader.addClass('show-search-list'); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | $search.off('click').on('click', '.ew-cascader-search-list-item', function (e) { |
|---|
| | | e.stopPropagation(); |
|---|
| | | if ($(this).hasClass('ew-cascader-disabled')) { // 是否禁用 |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var value = $(this).data('value').toString(); |
|---|
| | | _instance.hide(); |
|---|
| | | _instance.setValue(value); |
|---|
| | | var values = value.split(','); |
|---|
| | | var data = _instance.getData(); |
|---|
| | | for (var i = 0; i < values.length; i++) { |
|---|
| | | for (var j = 0; j < data.length; j++) { |
|---|
| | | if (data[j].value == values[i]) { |
|---|
| | | if (i === values.length - 1) { |
|---|
| | | data = data[j]; |
|---|
| | | } else { |
|---|
| | | data = data[j].children; |
|---|
| | | } |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | onChange && onChange(values, data); // 选中回调 |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | return _instance; |
|---|
| | | }, |
|---|
| | | /** 关闭所有 */ |
|---|
| | | hideAll: function () { |
|---|
| | | cascader.hideAllSearch(); |
|---|
| | | for (var i = 0; i < onVisibleChangeList.length; i++) { |
|---|
| | | var elem = onVisibleChangeList[i].elem; |
|---|
| | | var onVisibleChange = onVisibleChangeList[i].onVisibleChange; |
|---|
| | | var $cascader = $(elem).next(); |
|---|
| | | if ($cascader.hasClass('ew-cascader-open')) { |
|---|
| | | $cascader.removeClass('ew-cascader-open'); |
|---|
| | | $cascader.removeClass('dropdown-show-top'); |
|---|
| | | $cascader.removeClass('dropdown-show-left'); |
|---|
| | | onVisibleChange && onVisibleChange(false); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | /** 关闭所有搜索面板 */ |
|---|
| | | hideAllSearch: function () { |
|---|
| | | $('.ew-cascader-input-group').removeClass('show-search'); |
|---|
| | | $('.ew-cascader-group').removeClass('show-search-list'); |
|---|
| | | $('.ew-cascader-input-group').removeClass('have-value'); |
|---|
| | | $('.ew-cascader-input-search').val(''); |
|---|
| | | }, |
|---|
| | | /* 获取浏览器高度 */ |
|---|
| | | getPageHeight: function () { |
|---|
| | | return document.documentElement.clientHeight || document.body.clientHeight; |
|---|
| | | }, |
|---|
| | | /* 获取浏览器宽度 */ |
|---|
| | | getPageWidth: function () { |
|---|
| | | return document.documentElement.clientWidth || document.body.clientWidth; |
|---|
| | | }, |
|---|
| | | /* 检查宽度是否溢出屏幕 */ |
|---|
| | | checkWidthPosition: function ($dropdown) { |
|---|
| | | if ($dropdown.offset().left + $dropdown.outerWidth() > cascader.getPageWidth()) { |
|---|
| | | $dropdown.parent().addClass('dropdown-show-left'); |
|---|
| | | } else { |
|---|
| | | $dropdown.parent().removeClass('dropdown-show-left'); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | /* 检查高度是否溢出屏幕 */ |
|---|
| | | checkHeightPosition: function ($dropdown) { |
|---|
| | | if ($dropdown.offset().top + $dropdown.outerHeight() > cascader.getPageHeight()) { |
|---|
| | | $dropdown.parent().addClass('dropdown-show-top'); |
|---|
| | | if ($dropdown.offset().top < 0) { |
|---|
| | | $dropdown.parent().removeClass('dropdown-show-top'); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | /* 处理省市区数据，value变中文 */ |
|---|
| | | cascader.getCityData = function (data) { |
|---|
| | | for (var i = 0; i < data.length; i++) { |
|---|
| | | data[i].value = data[i].label; |
|---|
| | | if (data[i].children) { |
|---|
| | | data[i].children = cascader.getCityData(data[i].children); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return data; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | /* 处理省市区数据，不要区域 */ |
|---|
| | | cascader.getCity = function (data) { |
|---|
| | | for (var i = 0; i < data.length; i++) { |
|---|
| | | for (var j = 0; j < data[i].children.length; j++) { |
|---|
| | | delete data[i].children[j].children; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return data; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | /* 处理省市区数据，只要省 */ |
|---|
| | | cascader.getProvince = function (data) { |
|---|
| | | for (var i = 0; i < data.length; i++) { |
|---|
| | | delete data[i].children; |
|---|
| | | } |
|---|
| | | return data; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | /** 渲染列表 */ |
|---|
| | | var renderList = function ($dropdown, dataList, pIndex, itemHeight) { |
|---|
| | | var style = itemHeight ? ' style="height:' + itemHeight + ';"' : ''; |
|---|
| | | var htmlStr = '<div class="ew-cascader-dropdown-list" ' + style + '>'; |
|---|
| | | for (var i = 0; i < dataList.length; i++) { |
|---|
| | | var item = dataList[i]; |
|---|
| | | var index = pIndex == undefined ? i : (pIndex + '-' + i); |
|---|
| | | if (item.haveChildren == undefined) { |
|---|
| | | item.haveChildren = item.children ? true : false; |
|---|
| | | } |
|---|
| | | var className = item.haveChildren ? '' : ' is-last'; // 是否是叶子节点 |
|---|
| | | item.disabled && (className += ' ew-cascader-disabled'); // 是否禁用 |
|---|
| | | htmlStr += ' <div class="ew-cascader-dropdown-list-item' + className + '" data-index="' + index + '" data-value="' + item.value + '">' + item.label + '<i class="layui-icon layui-icon-right ew-icon-right"></i><i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop ew-icon-loading"></i></div>'; |
|---|
| | | } |
|---|
| | | htmlStr += ' </div>'; |
|---|
| | | $dropdown.append(htmlStr); |
|---|
| | | cascader.checkWidthPosition($dropdown); // 检查是否溢出屏幕 |
|---|
| | | }; |
|---|
| | | |
|---|
| | | /** 渲染搜索列表 */ |
|---|
| | | var renderSearchList = function ($search, dataList, notFoundText) { |
|---|
| | | var htmlStr = ''; |
|---|
| | | if (dataList.length == 0) { |
|---|
| | | htmlStr = '<div class="ew-cascader-search-list-empty">' + notFoundText + '</div>'; |
|---|
| | | } else { |
|---|
| | | for (var i = 0; i < dataList.length; i++) { |
|---|
| | | var item = dataList[i]; |
|---|
| | | var className = item.disabled ? ' ew-cascader-disabled' : ''; // 是否禁用 |
|---|
| | | htmlStr += '<div class="ew-cascader-search-list-item' + className + '" data-value="' + item.value + '">' + item.label + '</div>'; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | $search.html(htmlStr); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 点击空白区域关闭下拉列表 |
|---|
| | | $(document).off('click.cascader').on('click.cascader', function (e) { |
|---|
| | | try { |
|---|
| | | var classNames = e.target.className.split(' '); |
|---|
| | | var cascaders = ['ew-cascader-group', 'ew-cascader-input', 'ew-icon-arrow', 'ew-cascader-dropdown', 'ew-cascader-dropdown-list', 'ew-cascader-dropdown-list-item', 'ew-icon-right', 'ew-cascader-input-search', 'ew-cascader-search-list', 'ew-cascader-search-list-item']; |
|---|
| | | for (var i in classNames) { |
|---|
| | | for (var j in cascaders) { |
|---|
| | | if (classNames[i] == cascaders[j]) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } catch (e) { |
|---|
| | | } |
|---|
| | | cascader.hideAll(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | exports('cascader', cascader); |
|---|
| | | }); |
|---|
| | | layui.define(["jquery"],function(a){var e=layui.jquery;if(e("#ew-css-cascader").length<=0){layui.link(layui.cache.base+"cascader/cascader.css")}var f=[];var b={render:function(q){var E={renderFormat:function(J,i){return J.join(" / ")},clearable:true,clearAllActive:false,disabled:false,trigger:"click",changeOnSelect:false,filterable:false,notFoundText:"没有匹配数据"};q=e.extend(E,q);var B=q.elem;var A=q.data;var F=q.renderFormat;var I=q.clearable;var l=q.clearAllActive;var p=q.disabled;var u=q.trigger;var v=q.changeOnSelect;var s=q.reqData;var n=q.filterable;var m=q.notFoundText;var D=q.reqSearch;var y=q.onChange;var H=q.onVisibleChange;var x=q.itemHeight;var t=true;var h=e(B);if(h.next().hasClass("ew-cascader-group")){h.next().remove();for(var z=0;z<f.length;z++){if(B==f[z].elem){f.splice(z,1);break}}}f.push({elem:B,onVisibleChange:H});h.addClass("ew-cascader-hide");var r='<div class="ew-cascader-group">';r+=' <div class="ew-cascader-input-group">';r+=' <input class="layui-input ew-cascader-input" readonly/>';r+=' <input class="layui-input ew-cascader-input-search"/>';r+=' <i class="layui-icon layui-icon-triangle-d ew-icon-arrow"></i>';r+=' <i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop ew-icon-loading"></i>';r+=' <i class="layui-icon layui-icon-close-fill ew-icon-clear"></i>';r+=" </div>";r+=' <div class="ew-cascader-dropdown layui-anim layui-anim-upbit"></div>';r+=' <div class="ew-cascader-search-list"></div>';r+=" </div>";h.after(r);var G=h.next();var o=G.children(".ew-cascader-input-group");var k=o.children(".ew-cascader-input");var C=o.children(".ew-cascader-input-search");var j=G.children(".ew-cascader-dropdown");var w=G.children(".ew-cascader-search-list");k.attr("placeholder",h.attr("placeholder"));p&&k.addClass("layui-disabled");var g={data:A,getData:function(){return A},open:function(){if(G.hasClass("ew-cascader-open")){return}b.hideAll();G.addClass("ew-cascader-open");b.checkWidthPosition(j);b.checkHeightPosition(j);H&&H(true);if(n){o.addClass("show-search");C.focus()}},hide:function(){if(!G.hasClass("ew-cascader-open")){return}G.removeClass("ew-cascader-open");G.removeClass("dropdown-show-top");G.removeClass("dropdown-show-left");b.hideAllSearch();H&&H(false)},removeLoading:function(){G.removeClass("show-loading");j.find(".ew-cascader-dropdown-list-item").removeClass("show-loading")},setDisabled:function(i){p=i;if(i){k.addClass("layui-disabled");g.hide()}else{k.removeClass("layui-disabled")}},getValue:function(){return h.val()},getLabel:function(){return k.val()},setValue:function(J){if(J==undefined||J==null||!J.toString()){k.val("");h.val("");if(l||v){j.children(".ew-cascader-dropdown-list").not(":first").remove();j.find(".ew-cascader-dropdown-list-item").removeClass("active");b.checkWidthPosition(j)}else{j.find(".ew-cascader-dropdown-list-item.is-last").removeClass("active")}o.removeClass("show-clear");return}J=J.toString().split(",");var K=[];function i(Q,O,N,M,P){if(!Q&&O){Q=[];L(O)}else{if(Q&&O&&O.children){L(O.children)}else{G.addClass("show-loading");s(Q,function(R){if(Q){O.children=R}else{A=R;Q=[]}L(R)},O)}}function L(S){for(var R=0;R<S.length;R++){if(S[R].value==M[N]){K[N]=S[R].label;Q[N]=S[R].value;if(N<M.length-1){i(Q,S[R],N+1,M,P)}else{P()}break}}}}i(undefined,A,0,J,function(){G.removeClass("show-loading");k.val(F(K,J));h.val(J.join(","))})}};g.setValue(h.val());o.off("click").on("click",function(J){if(k.hasClass("layui-disabled")){return}if(G.hasClass("show-loading")){return}if(G.hasClass("ew-cascader-open")){if(!n){g.hide()}return}if(t){if(A){t=false;d(j,A,undefined,x);i();g.open()}else{G.addClass("show-loading");s(undefined,function(K){t=false;A=K;d(j,K,undefined,x);G.removeClass("show-loading");g.open()},undefined)}}else{i();g.open()}function i(){var M=h.val().toString();if(M){M=M.split(",");for(var L=0;L<M.length;L++){var K=j.children(".ew-cascader-dropdown-list").eq(L).children('.ew-cascader-dropdown-list-item[data-value="'+M[L]+'"]');if(L==M.length-1){K.addClass("active")}else{K.trigger("click")}}}else{g.setValue()}}});o.children(".ew-icon-arrow").off("click").on("click",function(i){if(G.hasClass("ew-cascader-open")){g.hide();i.stopPropagation()}});j.off("click").on("click",".ew-cascader-dropdown-list-item",function(){var P=e(this);if(P.hasClass("active")){if(P.hasClass("is-last")){g.hide()}return}if(P.hasClass("ew-cascader-disabled")){return}if(P.parent().parent().find(".ew-cascader-dropdown-list-item").hasClass("show-loading")){return}var O=P.data("index").toString();var K=O.split("-");var L=A[parseInt(K[0])],Q=[L.value],N=[L.label];for(var M=1;M<K.length;M++){L=L.children[parseInt(K[M])];Q[M]=L.value;N[M]=L.label}if(L.haveChildren){if(L.children){P.parent().nextAll().remove();b.checkWidthPosition(j);J();d(j,L.children,O,x)}else{P.addClass("show-loading");s(Q,function(i){L.children=i;P.parent().nextAll().remove();b.checkWidthPosition(j);J();d(j,i,O,x);P.removeClass("show-loading")},L)}if(v){J();R()}}else{P.parent().nextAll().remove();J();R();g.hide()}function J(){P.parent().children(".ew-cascader-dropdown-list-item").removeClass("active");P.addClass("active")}function R(){k.val(F(N,Q));h.val(Q.join(","));h.removeClass("layui-form-danger");y&&y(Q,L)}});if(u=="hover"){j.off("mouseenter").on("mouseenter",".ew-cascader-dropdown-list-item",function(){if(!e(this).hasClass("is-last")){e(this).trigger("click")}})}if(I){o.off("mouseenter").on("mouseenter",function(){if(h.val().toString()&&!k.hasClass("layui-disabled")){e(this).addClass("show-clear")}});o.off("mouseleave").on("mouseleave",function(){e(this).removeClass("show-clear")});o.children(".ew-icon-clear").off("click").on("click",function(i){i.stopPropagation();g.setValue();y&&y()})}if(n){C.off("input").on("input",function(){var N=e(this).val();if(!N){G.removeClass("show-search-list");o.removeClass("have-value");return}o.addClass("have-value");if(D){D(N,function(i){c(w,i,m);G.addClass("show-search-list")},A)}else{var M=[],O=[];function J(P,Q,U,S){for(var R=0;R<P.length;R++){var T=P[R];T.__label=Q?Q+" / "+T.label:T.label;T.__value=U?U+","+T.value:T.value;T.__disabled=T.disabled?T.disabled:S;if(T.children&&T.children.length){J(T.children,T.__label,T.__value,T.__disabled);delete T.__label;delete T.__value}else{M.push({label:T.__label,value:T.__value,disabled:T.__disabled})}}}J(A);for(var K=0;K<M.length;K++){var L=M[K];if(L.label.indexOf(N)>-1){L.label=L.label.replace(new RegExp(N,"g"),'<span class="search-keyword">'+N+"</span>");O.push(L)}}c(w,O,m);G.addClass("show-search-list")}});w.off("click").on("click",".ew-cascader-search-list-item",function(O){O.stopPropagation();if(e(this).hasClass("ew-cascader-disabled")){return}var N=e(this).data("value").toString();g.hide();g.setValue(N);var J=N.split(",");var M=g.getData();for(var L=0;L<J.length;L++){for(var K=0;K<M.length;K++){if(M[K].value==J[L]){if(L===J.length-1){M=M[K]}else{M=M[K].children}break}}}y&&y(J,M)})}return g},hideAll:function(){b.hideAllSearch();for(var j=0;j<f.length;j++){var k=f[j].elem;var h=f[j].onVisibleChange;var g=e(k).next();if(g.hasClass("ew-cascader-open")){g.removeClass("ew-cascader-open");g.removeClass("dropdown-show-top");g.removeClass("dropdown-show-left");h&&h(false)}}},hideAllSearch:function(){e(".ew-cascader-input-group").removeClass("show-search");e(".ew-cascader-group").removeClass("show-search-list");e(".ew-cascader-input-group").removeClass("have-value");e(".ew-cascader-input-search").val("")},getPageHeight:function(){return document.documentElement.clientHeight||document.body.clientHeight},getPageWidth:function(){return document.documentElement.clientWidth||document.body.clientWidth},checkWidthPosition:function(g){if(g.offset().left+g.outerWidth()>b.getPageWidth()){g.parent().addClass("dropdown-show-left")}else{g.parent().removeClass("dropdown-show-left")}},checkHeightPosition:function(g){if(g.offset().top+g.outerHeight()>b.getPageHeight()){g.parent().addClass("dropdown-show-top");if(g.offset().top<0){g.parent().removeClass("dropdown-show-top")}}}};b.getCityData=function(h){for(var g=0;g<h.length;g++){h[g].value=h[g].label;if(h[g].children){h[g].children=b.getCityData(h[g].children)}}return h};b.getCity=function(k){for(var h=0;h<k.length;h++){for(var g=0;g<k[h].children.length;g++){delete k[h].children[g].children}}return k};b.getProvince=function(h){for(var g=0;g<h.length;g++){delete h[g].children}return h};var d=function(n,p,o,j){var h=j?' style="height:'+j+';"':"";var g='<div class="ew-cascader-dropdown-list" '+h+">";for(var k=0;k<p.length;k++){var q=p[k];var l=o==undefined?k:(o+"-"+k);if(q.haveChildren==undefined){q.haveChildren=q.children?true:false}var m=q.haveChildren?"":" is-last";q.disabled&&(m+=" ew-cascader-disabled");g+=' <div class="ew-cascader-dropdown-list-item'+m+'" data-index="'+l+'" data-value="'+q.value+'">'+q.label+'<i class="layui-icon layui-icon-right ew-icon-right"></i><i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop ew-icon-loading"></i></div>'}g+=" </div>";n.append(g);b.checkWidthPosition(n)};var c=function(m,h,l){var n="";if(h.length==0){n='<div class="ew-cascader-search-list-empty">'+l+"</div>"}else{for(var g=0;g<h.length;g++){var k=h[g];var j=k.disabled?" ew-cascader-disabled":"";n+='<div class="ew-cascader-search-list-item'+j+'" data-value="'+k.value+'">'+k.label+"</div>"}}m.html(n)};e(document).off("click.cascader").on("click.cascader",function(l){try{var m=l.target.className.split(" ");var k=["ew-cascader-group","ew-cascader-input","ew-icon-arrow","ew-cascader-dropdown","ew-cascader-dropdown-list","ew-cascader-dropdown-list-item","ew-icon-right","ew-cascader-input-search","ew-cascader-search-list","ew-cascader-search-list-item"];for(var h in m){for(var g in k){if(m[h]==k[g]){return}}}}catch(l){}b.hideAll()});a("cascader",b)}); |
|---|
