layui多選下拉使用筆記
阿新 • • 發佈：2019-02-14
bug、新增內容、修改內容
| 擴充套件 | |
| 增加屬性xm-select-dd-title |
設定當滑鼠劃過時顯示提示框格式。預設不顯示,值為“tip”時使用layui自帶的tips顯示，其它按照title屬性顯示。詳見程式碼。 |
| 增加屬性xm-select-custom-title |
自定義當前選中值的提示資訊的格式。預設為當前所有選中值按，分隔的字串，&title& 為選中值位置。 例：設定 xm-select-custom-title=“當前選擇：&title&” 則input的title顯示為 "當前選擇：選項1,選項2" |
| 增加屬性xm-select-custom-title-split | 自定義當前選中值的提示資訊的分隔符。預設, |
| 增加屬性xm-search-placeholder | 自定義搜尋按鈕的佔位符。預設 "請搜尋" |
| 增加設定單選框顯示或隱藏,及隱藏時的選中樣式xm-select-radio-hide(這樣就能使用多選外掛配置實現單選，因為多選外掛配置比較) | 設定xm-select-radio。"hide"為隱藏,""為顯示 |
| 在彈出層使用下拉外掛時會出現由於彈出層高度小於下拉框高度導致的下拉框顯示不全的情況，增加skin:layer-ext-myskin樣式設定使下拉框顯示完全 | 使用：
|
| 修改 | |
| 配置clearInput無效 | var config = options?{clearInput:options.clearInput} |
| 自定義maxTips方法時max為undefined |
Common.prototype.handlerLabel = function(id,dd,isAdd,oval,notOn){ ... maxTipsFun && maxTipsFun(id,vals.concat([]),val,fs.config.max) ...} |
| 動態生成的id與之前生成的id重複時的報錯（比如option變化或者select根據其它值生成時可能存在的重複id） |
Select4.prototype.render = function (id, options) { ... id?(data[id]&&($('dl[xid="' + id + '"]').length==0?(delete data[id]):(target[id]) = data[id])):target.data; ...} |
| 解決btn為[]時查詢框不顯示的問題 201808 |
Common.prototype.renderSelect = function(id, tips, select){ ... if(data[id].config.isSearch){ ...} |
| 當為單選取消選中時不關閉下拉框 |
Common.prototype.handlerLabel = function(id, dd, isAdd, oval, notOn){ ... if(isAdd&&fs.config.radio){ ... } |
| 使用 | |
| 根據value和name搜尋顯示 |
|
| 設定value在下拉選項右側顯示 |
|
| 變數 | |
| FORM_SELECT_TIPS | 是快捷操作和搜尋框的class，有用於在處理dd下拉選項時排除快捷操作和搜尋框的dd |
| CZ | 快捷操作div的class,有用於判斷當前點選快捷鍵是div還是div的子節點（最終取div獲取對應執行方法） |
| CZ-GROUP | 包含所有快捷鍵的外層div的class，有用於渲染時獲取該div重新設定max-width |
| clearInput | 當有搜尋內容時, 點選選項是否清空搜尋內容, 預設不清空 |
| 方法 | |
| on |
監聽select選擇,function(id,Vals,val,isAdd,isDisabled){...} id:點選select的id isDisabled:當前選項是否是disabled 如果return false, 那麼將取消本次操作 |
| filter |
自定義本地搜尋過濾方式, 預設匹配文字是否包含。function(id, inputVal, val, isDisabled){...} id:點選select的id |
| template |
自定義模板。選項預設是顯示的孤零零的name值, 可以自定義格式。function(name, value, selected, disabled){...} name:選項的name value:選項的value selected:選項的選擇狀態 disabled:選項的禁選狀態 |
| maxTips | 自定義多選select超出最大可選數量時的提示，預設閃爍紅色邊框。 |
/* formSelects多選css */
select[xm-select]{display: none !important;}
.xm-select-parent * {margin: 0;padding: 0;font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微軟雅黑, Tahoma, Arial, sans-serif; box-sizing: initial;}
.xm-select-parent {text-align: left;}
.xm-select-parent select {display: none;}
.xm-select-parent .xm-select-title {position: relative;min-height: 36px;}
.xm-select-parent .xm-input {cursor: pointer;border-radius: 2px;border-width: 1px;border-style: solid;border-color: #E6E6E6;display: block;width: 100%;box-sizing: border-box;background-color: #FFF;height: 36px;line-height: 1.3;padding-left: 10px;outline: 0}
.xm-select-parent .xm-select-sj {display: inline-block;width: 0;height: 0;border-style: dashed;border-color: transparent;overflow: hidden;position: absolute;right: 10px;top: 50%;margin-top: -3px;cursor: pointer;border-width: 6px;border-top-color: #C2C2C2;border-top-style: solid;transition: all .3s;-webkit-transition: all .3s}
.xm-select-parent .xm-form-selected .xm-select-sj {margin-top: -9px;transform: rotate(180deg)}
.xm-select-parent .xm-form-select dl {display: none;position: absolute;left: 0;top: 42px;padding: 5px 0;z-index: 999;min-width: 100%;border: 1px solid #d2d2d2;max-height: 300px;overflow-y: auto;background-color: #fff;border-radius: 2px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12);box-sizing: border-box;animation-fill-mode: both;-webkit-animation-name: layui-upbit;animation-name: layui-upbit;-webkit-animation-duration: .3s;animation-duration: .3s;-webkit-animation-fill-mode: both;animation-fill-mode: both}
@-webkit-keyframes layui-upbit {
from {-webkit-transform: translate3d(0, 30px, 0);opacity: .3}
to {-webkit-transform: translate3d(0, 0, 0);opacity: 1}
}
@keyframes layui-upbit {
from {transform: translate3d(0, 30px, 0);opacity: .3}
to {transform: translate3d(0, 0, 0);opacity: 1}
}
.xm-select-parent .xm-form-selected dl {display: block}
.xm-select-parent .xm-form-select dl dd,.xm-select-parent .xm-form-select dl dt {padding: 0 10px;line-height: 36px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.xm-select-parent .xm-form-select dl dd {cursor: pointer;height: 36px;}
.xm-select-parent .xm-form-select dl dd:hover {background-color: #f2f2f2}
.xm-select-parent .xm-form-select dl dt {font-size: 12px;color: #999}
.layui-select-disabled .xm-dis-disabled {border-color: #eee!important}
.xm-select-parent .xm-form-select dl .xm-select-tips {padding-left: 10px!important;color: #999;font-size: 14px}
.xm-unselect {-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none}
.xm-form-checkbox {position: relative;display: block;vertical-align: middle;cursor: pointer;font-size: 0;-webkit-transition: .1s linear;transition: .1s linear;box-sizing: border-box;height: auto!important;line-height: normal!important;border: none!important;margin-right: 0;padding-right: 0;background: 0 0;}
.xm-form-checkbox > i {color: #FFF; font-size: 16px; width: 16px; height: 16px; position: absolute; top: 9px; border: 1px solid #5FB878; border-radius: 3px; z-index: 2;}
.xm-form-checkbox:hover > i {border-color: #5FB878;}
.xm-form-checkbox > span{display: block;position: relative;padding: 0 15px 0 30px;height: 100%;font-size: 14px;border-radius: 2px 0 0 2px;background-color: #d2d2d2;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;background: 0 0;color: #666;line-height: 36px;}
.xm-select-parent dl{width: 100%;}
.xm-select-parent dl dd{position: relative;}
.xm-select-parent dl dd > i:not(.icon-sousuo){position: absolute; right: 10px; top: 0; color: #AAAAAA;}
.xm-select-parent dl dd.xm-select-this div i {border: none; color: #009688; font-size: 18px;}
.xm-select-parent dl dd.xm-select-this div i:after{content: '\e613';}
.xm-select-parent dl dd.xm-dis-disabled div i {border-color: #C2C2C2;}
.xm-select-parent dl dd.xm-dis-disabled.xm-select-this div i {color: #C2C2C2;}
.xm-select-radio div.xm-form-checkbox > i {border-radius: 20px;}
.xm-select-parent dl.xm-select-radio dd.xm-select-this div i:after{content: '\e62b';}
.xm-select-radio-hide>div>i.xm-iconfont{display:none;}
.xm-select-radio-hide>div>span{padding-left:0px;}
.xm-select-radio-hide.xm-select-this{background-color:#009688;}
dl dd.xm-select-radio-hide.xm-select-this:hover{background-color:#009688c7;}
.xm-select-radio-hide.xm-select-this:not(.xm-dis-disabled) .xm-form-checkbox > span{color:white;}
.xm-select-radio-hide.xm-select-this .formSelectsTemplate{color:#f0f0f0;}
.xm-dis-disabled,.xm-dis-disabled:hover {cursor: not-allowed!important}
.xm-form-select dl dd.xm-dis-disabled {background-color: #fff!important}
.xm-form-select dl dd.xm-dis-disabled span {color: #C2C2C2}
.xm-form-select dl dd.xm-dis-disabled .xm-icon-yes {border-color: #C2C2C2}
.xm-select-parent {position: relative;-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none}
.xm-select-parent .xm-select {line-height: normal;height: auto;padding: 4px 10px 1px 10px;overflow: hidden;min-height: 36px;left: 0;z-index: 99;position: absolute;background: 0 0;padding-right: 20px}
.xm-select-parent .xm-select:hover {border-color: #C0C4CC}
.xm-select-parent .xm-select .xm-select-label {display: inline-block;margin: 0;vertical-align: middle}
.xm-select-parent .xm-select-title div.xm-select-label>span {position: relative;padding: 2px 5px;background-color: #009688;border-radius: 2px;color: #FFF;display: inline-block;line-height: 18px;height: 18px;margin: 2px 5px 2px 0;cursor: initial;user-select: none;font-size: 14px;padding-right: 25px;-webkit-user-select: none;}
.xm-select-parent .xm-select-title div.xm-select-label>span i {position: absolute; margin-left: 8px; font-size: 12px; cursor: pointer; line-height: 20px;}
.xm-select-parent .xm-select .xm-select-input {border: none;height: 28px;background-color: transparent;padding: 0;vertical-align: middle;display: inline-block;width: 50px}
.xm-select-parent .xm-select--suffix input {border: none}
.xm-form-selected .xm-select,.xm-form-selected .xm-select:hover {border-color: #009688!important}
.xm-select--suffix+div {position: absolute;top: 0;left: 0;bottom: 0;right: 0}
.xm-select-dis .xm-select--suffix+div {z-index: 100;cursor: no-drop!important;opacity: .2;background-color: #FFF;}
.xm-select-disabled,.xm-select-disabled:hover {color: #d2d2d2!important;cursor: not-allowed!important;background-color: #fff}
.xm-select-none {display: none;margin: 5px 0;text-align: center;}
.xm-select-none:hover {background-color: #FFF!important}
.xm-select-empty {display: block}
.xm-span-hide {display: none!important;}
.layui-form-pane .xm-select,.layui-form-pane .xm-select:hover {border: none!important;top: 0px}
.layui-form-pane .xm-select-title {border: 1px solid #e6e6e6!important}
.xm-select-hide {display: none !important;}
div[xm-hg] .xm-select-label{white-space: nowrap; overflow: hidden; position: absolute; right: 30px; left: 0; padding-left: 10px;}
/* 顏色相關 */
div[xm-select-skin] .xm-select-title div.xm-select-label>span {border: 1px solid #009688}
div[xm-select-skin] .xm-select-title div.xm-select-label>span i:hover {opacity: .8;filter: alpha(opacity=80);cursor: pointer}
div[xm-select-skin=default] .xm-select-title div.xm-select-label>span {background-color: #F0F2F5;color: #909399;border: 1px solid #F0F2F5}
div[xm-select-skin=default] .xm-select-title div.xm-select-label>span i {color: #C0C4CC}
div[xm-select-skin=default] .xm-select-title div.xm-select-label>span i:before {content: '\e60b'; font-size: 16px; margin-left: -3px;}
div[xm-select-skin=default] dl dd:not(.xm-dis-disabled) i {border-color: #5FB878}
div[xm-select-skin=default] dl dd.xm-select-this:not(.xm-dis-disabled) i {color: #5FB878}
div[xm-select-skin=default].xm-form-selected .xm-select,div[xm-select-skin=default].xm-form-selected .xm-select:hover {border-color: #C0C4CC!important}
div[xm-select-skin=primary] .xm-select-title div.xm-select-label>span {background-color: #009688;color: #FFF;border: 1px solid #009688}
div[xm-select-skin=primary] .xm-select-title div.xm-select-label>span i {background-color: #009688; color: #FFF}
div[xm-select-skin=primary] dl dd:not(.xm-dis-disabled) i {border-color: #009688}
div[xm-select-skin=primary] dl dd.xm-select-this:not(.xm-dis-disabled) i {color: #009688}
div[xm-select-skin=primary].xm-form-selected .xm-select,div[xm-select-skin=primary].xm-form-selected .xm-select:hover {border-color: #009688}/*!important*/
div[xm-select-skin=normal] .xm-select-title div.xm-select-label>span {background-color: #1E9FFF;color: #FFF;border: 1px solid #1E9FFF}
div[xm-select-skin=normal] .xm-select-title div.xm-select-label>span i {background-color: #1E9FFF;color: #FFF}
div[xm-select-skin=normal] dl dd:not(.xm-dis-disabled) i {border-color: #1E9FFF}
div[xm-select-skin=normal] dl dd.xm-select-this:not(.xm-dis-disabled) i {color: #1E9FFF}
div[xm-select-skin=normal].xm-form-selected .xm-select,div[xm-select-skin=normal].xm-form-selected .xm-select:hover {border-color: #1E9FFF!important}
div[xm-select-skin=warm] .xm-select-title div.xm-select-label>span {background-color: #FFB800;color: #FFF;border: 1px solid #FFB800}
div[xm-select-skin=warm] .xm-select-title div.xm-select-label>span i {background-color: #FFB800;color: #FFF}
div[xm-select-skin=warm] dl dd:not(.xm-dis-disabled) i {border-color: #FFB800}
div[xm-select-skin=warm] dl dd.xm-select-this:not(.xm-dis-disabled) i {color: #FFB800}
div[xm-select-skin=warm].xm-form-selected .xm-select,div[xm-select-skin=warm].xm-form-selected .xm-select:hover {border-color: #FFB800!important}
div[xm-select-skin=danger] .xm-select-title div.xm-select-label>span {background-color: #FF5722;color: #FFF;border: 1px solid #FF5722}
div[xm-select-skin=danger] .xm-select-title div.xm-select-label>span i {background-color: #FF5722;color: #FFF}
div[xm-select-skin=danger] dl dd:not(.xm-dis-disabled) i {border-color: #FF5722}
div[xm-select-skin=danger] dl dd.xm-select-this:not(.xm-dis-disabled) i {color: #FF5722}
div[xm-select-skin=danger].xm-form-selected .xm-select,div[xm-select-skin=danger].xm-form-selected .xm-select:hover {border-color: #FF5722!important}
/* 多選聯動 */
.xm-select-parent .layui-form-danger+.xm-select-title .xm-select {border-color: #FF5722 !important;}
.xm-select-linkage li {padding: 10px 0px;cursor: pointer;}
.xm-select-linkage li span {padding-left: 20px;padding-right: 30px;display: inline-block;height: 20px;overflow: hidden;text-overflow: ellipsis;}
.xm-select-linkage li.xm-select-this span {border-left: 5px solid #009688;color: #009688;padding-left: 15px;}
.xm-select-linkage-group {position: absolute;left: 0;top: 0;right: 0;bottom: 0;overflow-x: hidden;overflow-y: auto;}
.xm-select-linkage-group li:hover {border-left: 1px solid #009688;}
.xm-select-linkage-group li:hover span {padding-left: 19px;}
.xm-select-linkage-group li.xm-select-this:hover span {padding-left: 15px;border-left-width: 4px;}
.xm-select-linkage-group:nth-child(4n+1){background-color: #EFEFEF; left: 0;}
.xm-select-linkage-group:nth-child(4n+1) li.xm-select-active{background-color: #F5F5F5;}
.xm-select-linkage-group:nth-child(4n+2){background-color: #F5F5F5; left: 100px;}
.xm-select-linkage-group:nth-child(4n+3) li.xm-select-active{background-color: #FAFAFA;}
.xm-select-linkage-group:nth-child(4n+3){background-color: #FAFAFA; left: 200px;}
.xm-select-linkage-group:nth-child(4n+3) li.xm-select-active{background-color: #FFFFFF;}
.xm-select-linkage-group:nth-child(4n+4){background-color: #FFFFFF; left: 300px;}
.xm-select-linkage-group:nth-child(4n+4) li.xm-select-active{background-color: #EFEFEF;}
.xm-select-linkage li{list-style: none;}
.xm-select-linkage-hide {display: none;}
.xm-select-linkage-show {display: block;}
div[xm-select-skin='default'] .xm-select-linkage li.xm-select-this span {border-left-color: #5FB878;color: #5FB878;}
div[xm-select-skin='default'] .xm-select-linkage-group li:hover {border-left-color: #5FB878;}
div[xm-select-skin='primary'] .xm-select-linkage li.xm-select-this span {border-left-color: #1E9FFF;color: #1E9FFF;}
div[xm-select-skin='primary'] .xm-select-linkage-group li:hover {border-left-color: #1E9FFF;}
div[xm-select-skin='normal'] .xm-select-linkage li.xm-select-this span {border-left-color: #1E9FFF;color: #1E9FFF;}
div[xm-select-skin='normal'] .xm-select-linkage-group li:hover {border-left-color: #1E9FFF;}
div[xm-select-skin='warm'] .xm-select-linkage li.xm-select-this span {border-left-color: #FFB800;color: #FFB800;}
div[xm-select-skin='warm'] .xm-select-linkage-group li:hover {border-left-color: #FFB800;}
div[xm-select-skin='danger'] .xm-select-linkage li.xm-select-this span {border-left-color: #FF5722;color: #FF5722;}
div[xm-select-skin='danger'] .xm-select-linkage-group li:hover {border-left-color: #FF5722;}
/* 快捷操作 */
.xm-select-tips[style]:hover{background-color: #FFF!important;}
.xm-select-parent dd > .xm-cz{position: absolute; top: 0px; right: 10px;}
.xm-select-parent dd > .xm-cz-group{margin-right: 30px; border-right: 2px solid #ddd; height: 16px; margin-top: 10px; line-height: 16px; overflow: hidden;}
.xm-select-parent dd > .xm-cz-group .xm-cz{display: inline-block; margin-right: 30px;}
.xm-select-parent dd > .xm-cz-group .xm-cz i{margin-right: 10px;}
.xm-select-parent dd > .xm-cz-group[show='name'] .xm-cz i{display: none;}
.xm-select-parent dd > .xm-cz-group[show='icon'] .xm-cz span{display: none;}
.xm-select-parent dd .xm-cz:hover{color: #009688;}
div[xm-select-skin='default'] dd .xm-cz:hover{color: #C0C4CC;}
div[xm-select-skin='primary'] dd .xm-cz:hover{color: #009688;}
div[xm-select-skin='normal'] dd .xm-cz:hover{color: #1E9FFF;}
div[xm-select-skin='warm'] dd .xm-cz:hover{color: #FFB800;}
div[xm-select-skin='danger'] dd .xm-cz:hover{color: #FF5722;}
/* 下拉里面的搜尋 */
.xm-select-tips .xm-input{border: none; border-bottom: 1px solid #E6E6E6; padding-left: 27px;}
.xm-select-tips .icon-sousuo{position: absolute;}
.xm-select-tips.xm-dl-input{display: none;}
div[xm-select-search-type="1"] .xm-select-tips.xm-dl-input{display: block;}
div[xm-select-search-type="1"] .xm-select .xm-select-input{display: none !important;}
/*設定彈出層裡的下拉寬顯示完全*/
.layer-ext-myskin .layui-layer-content {
overflow: visible;
}
/* 阿里巴巴向量圖示庫 */
@font-face {font-family: "xm-iconfont";
src: url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.eot?t=1534240067831'); /* IE9*/
src: url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.eot?t=1534240067831#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.ttf?t=1534240067831') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.svg?t=1534240067831#iconfont') format('svg'); /* iOS 4.1- */
}
.xm-iconfont {font-family:"xm-iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.icon-quanxuan:before { content: "\e62c"; }
.icon-caidan:before { content: "\e610"; }
.icon-fanxuan:before { content: "\e837"; }
.icon-pifu:before { content: "\e668"; }
.icon-qingkong:before { content: "\e63e"; }
.icon-sousuo:before { content: "\e600"; }
.icon-danx:before { content: "\e62b"; }
.icon-duox:before { content: "\e613"; }
.icon-close:before { content: "\e601"; }
.icon-expand:before { content: "\e641"; }
/**
* name: formSelects
* 基於Layui Select多選
* version: 4.0.0.0817
* http://sun.faysunshine.com/layui/formSelects-v4/dist/formSelects-v4.js
*/
(function(layui, window, factory) {
if(typeof exports === 'object') { // 支援 CommonJS
module.exports = factory();
} else if(typeof define === 'function' && define.amd) { // 支援 AMD
define(factory);
} else if(window.layui && layui.define) { //layui載入
layui.define(['jquery'], function(exports) {
exports('formSelects', factory());
});
} else {
window.formSelects = factory();
}
})(typeof layui == 'undefined' ? null : layui, window, function() {
let v = '4.0.0.0817',
NAME = 'xm-select',
PNAME = 'xm-select-parent',
INPUT = 'xm-select-input',
TDIV = 'xm-select--suffix',
THIS = 'xm-select-this',
LABEL = 'xm-select-label',
SEARCH = 'xm-select-search',
SEARCH_TYPE = 'xm-select-search-type',
DD_TITLE = 'xm-select-dd-title',
SHOW_COUNT = 'xm-select-show-count',
CREATE = 'xm-select-create',
CREATE_LONG = 'xm-select-create-long',
MAX = 'xm-select-max',
SKIN = 'xm-select-skin',
DIRECTION = "xm-select-direction",
HEIGHT = 'xm-select-height',
DISABLED = 'xm-dis-disabled',
DIS = 'xm-select-dis',
TEMP = 'xm-select-temp',
RADIO = 'xm-select-radio',
RADIO_HIDE = 'xm-select-radio-hide';
LINKAGE= 'xm-select-linkage',
DL = 'xm-select-dl',
DD_HIDE = 'xm-select-hide',
HIDE_INPUT = 'xm-hide-input',
SANJIAO = 'xm-select-sj',
ICON_CLOSE = 'xm-icon-close',
FORM_TITLE = 'xm-select-title',
CUSTOM_TITLE = 'xm-select-custom-title',
CUSTOM_TITLE_SPLIT = 'xm-select-custom-title-split',
FORM_SELECT = 'xm-form-select',
FORM_SELECTED = 'xm-form-selected',
FORM_NONE = 'xm-select-none',
FORM_EMPTY = 'xm-select-empty',
FORM_INPUT = 'xm-input',
FORM_DL_INPUT = 'xm-dl-input',
FORM_SELECT_TIPS = 'xm-select-tips',
CHECKBOX_YES = 'xm-iconfont',
FORM_TEAM_PID = 'XM_PID_VALUE',
CZ = 'xm-cz',
CZ_GROUP = 'xm-cz-group',
DEFAULT_TIPS = '請選擇',
SEARCH_PLACEHOLDER = 'xm-search-placeholder',
data = {},
events = {
on: {},
endOn: {},
filter: {},
maxTips: {},
opened: {},
closed: {}
},
ajax = {
type: 'get',
header: {
},
first: true,
data: {},
searchUrl: '',
searchName: 'keyword',
searchVal: null,
keyName: 'name',
keyVal: 'value',
keySel: 'selected',
keyDis: 'disabled',
keyChildren: 'children',
dataType: '',
delay: 500,
beforeSuccess: null,
success: null,
error: null,
beforeSearch: null,
response: {
statusCode: 0,
statusName: 'code',
msgName: 'msg',
dataName: 'data'
},
tree: {
nextClick: function(id, item, callback){
callback([]);
},
folderChoose: true,
lazy: true
}
},
quickBtns = [
{icon: 'xm-iconfont icon-quanxuan', name: '全選', click: function(id, cm){
cm.selectAll(id, true, true);
}},
{icon: 'xm-iconfont icon-qingkong', name: '清空', click: function(id, cm){
cm.removeAll(id, true, true);
}},
{icon: 'xm-iconfont icon-fanxuan', name: '反選', click: function(id, cm){
cm.reverse(id, true, true);
}},
{icon: 'xm-iconfont icon-pifu', name: '換膚', click: function(id, cm){
cm.skin(id);
}}
],
$ = window.$ || (window.layui && window.layui.jquery),
$win = $(window),
ajaxs = {},
fsConfig = {},
fsConfigs = {},
FormSelects = function(options) {
this.config = {
name: null, //xm-select="xxx"
max: null,
maxTips: (id, vals, val, max) => {
let ipt = $(`[xid="${this.config.name}"]`).prev().find(`.${NAME}`);
if(ipt.parents('.layui-form-item[pane]').length) {
ipt = ipt.parents('.layui-form-item[pane]');
}
ipt.attr('style', 'border-color: red !important');
setTimeout(() => {
ipt.removeAttr('style');
}, 300);
},
init: null, //初始化的選擇值,
on: null, //select值發生變化
opened: null,
closed: null,
filter: (id, inputVal, val, isDisabled) => {
return val.name.indexOf(inputVal) == -1;
},
clearid: -1,
direction: 'auto',
height: null,
isEmpty: false,
btns: [quickBtns[0], quickBtns[1], quickBtns[2]],
searchType: 0,
ddTitle:false,
create: (id, name) => {
return Date.now();
},
template: (name, value, selected, disabled) => {
return name;
},
showCount: 0,
isCreate: false,
placeholder: DEFAULT_TIPS,
clearInput: false,
};
this.select = null;
this.values = [];
$.extend(this.config, options, {
searchUrl: options.isSearch ? options.searchUrl : null,
placeholder: options.optionsFirst ? (
options.optionsFirst.value ? DEFAULT_TIPS : (options.optionsFirst.innerHTML || DEFAULT_TIPS)
) : DEFAULT_TIPS,
btns: options.radio ? [quickBtns[1]] : [quickBtns[0], quickBtns[1], quickBtns[2]],
}, fsConfigs[options.name] || fsConfig);
if(isNaN(this.config.showCount) || this.config.showCount <= 0) {
this.config.showCount = 19921012;
}
};
//一些簡單的處理方法
let Common = function(){
this.appender();
this.on();
this.onreset();
};
Common.prototype.appender = function(){//針對IE做的一些拓展
//拓展Array map方法
if(!Array.prototype.map){
Array.prototype.map=function(i,h){
var b,
a,
c,
e=Object(this),
f=e.length>>>0;
if(h){
b=h;
}
a=new Array(f);
c=0;
while(c<f){
var d,g;
if(c in e){
d=e[c];
g=i.call(b,d,c,e);
a[c]=g;
}
c++;
}
return a;
}
};
//拓展Array foreach方法
if(!Array.prototype.forEach){
Array.prototype.forEach=function forEach(g,b){
var d,c;
if(this==null){
throw new TypeError("this is null or not defined");
}
var f=Object(this);
var a=f.length>>>0;
if(typeof g!=="function"){
throw new TypeError(g+" is not a function");
}
if(arguments.length>1){
d=b;
}
c=0;
while(c<a){
var e;
if(c in f){
e=f[c];
g.call(d,e,c,f);
}
c++;
}
}
};
//拓展Array filter方法
if(!Array.prototype.filter){Array.prototype.filter=function(b){if(this===void 0||this===null){throw new TypeError()}var f=Object(this);var a=f.length>>>0;if(typeof b!=="function"){throw new TypeError()}var e=[];var d=arguments[1];for(var c=0;c<a;c++){if(c in f){var g=f[c];if(b.call(d,g,c,f)){e.push(g)}}}return e}};
}
Common.prototype.init = function(target){
//初始化頁面上已有的select
$((target ? target : `select[${NAME}]`)).each((index, select) => {
let othis = $(select),
id = othis.attr(NAME),
hasLayuiRender = othis.next(`.layui-form-select`),
hasRender = othis.next(`.${PNAME}`),
options = {
name: id,
disabled: select.disabled,
max: othis.attr(MAX) - 0,
isSearch: othis.attr(SEARCH) != undefined,
searchUrl: othis.attr(SEARCH),
isCreate: othis.attr(CREATE) != undefined,
radio: othis.attr(RADIO) != undefined?(othis.attr(RADIO)==""?true:othis.attr(RADIO)):false,
skin: othis.attr(SKIN),
direction: othis.attr(DIRECTION),
optionsFirst: select.options[0],
height: othis.attr(HEIGHT),
formname: othis.attr('name') || othis.attr('_name'),
layverify: othis.attr('lay-verify') || othis.attr('_lay-verify'),
layverType: othis.attr('lay-verType'),
searchType: othis.attr(SEARCH_TYPE) == 'dl' ? 1 : 0,
ddTitle: othis.attr(DD_TITLE)?othis.attr(DD_TITLE):false,
customTitle:othis.attr(CUSTOM_TITLE),
customTitleSplit: othis.attr(CUSTOM_TITLE_SPLIT)?othis.attr(CUSTOM_TITLE_SPLIT):",",
showCount: othis.attr(SHOW_COUNT) - 0,
searchPlaceholder: othis.attr(SEARCH_PLACEHOLDER)?othis.attr(SEARCH_PLACEHOLDER):"請搜尋",
},
value = othis.find('option[selected]').toArray().map((option) => {//獲取已選中的資料
return {
name: option.innerHTML,
value: option.value,
}
}),
fs = new FormSelects(options);
fs.values = value;
if(fs.config.init) {
fs.values = fs.config.init.map(item => {
if(typeof item == 'object') {
return item;
}
return {
name: othis.find(`option[value="${item}"]`).text(),
value: item
}
}).filter(item => {
return item.name;
});
fs.config.init = fs.values.concat([]);
}else{
fs.config.init = value.concat([]);
}
!fs.values && (fs.values = []);
data[id] = fs;
//先取消layui對select的渲染
hasLayuiRender[0] && hasLayuiRender.remove();
hasRender[0] && hasRender.remove();
//構造渲染div
let dinfo = this.renderSelect(id, fs.config.placeholder, select);
let heightStyle = !fs.config.height || fs.config.height == 'auto' ? '' : `xm-hg style="height: 34px;"`;
let inputHtml = [
`<div class="${LABEL}">`,
`<input type="text" fsw class="${FORM_INPUT} ${INPUT}" ${fs.config.isSearch ? '' : 'style="display: none;"'} autocomplete="off" debounce="0" />`,
`</div>`
];
let reElem =
$(`<div class="${FORM_SELECT}" ${SKIN}="${fs.config.skin}">
<input class="${HIDE_INPUT}" value="" name="${fs.config.formname}" lay-verify="${fs.config.layverify}" lay-verType="${fs.config.layverType}" type="text" style="position: absolute;bottom: 0; z-index: -1;width: 100%; height: 100%; border: none; opacity: 0;"/>
<div class="${FORM_TITLE} ${fs.config.disabled ? DIS : ''}">
<div class="${FORM_INPUT} ${NAME}" ${heightStyle}>
${inputHtml.join('')}
<i class="${SANJIAO}"></i>
</div>
<div class="${TDIV}">
<input type="text" autocomplete="off" placeholder="${fs.config.placeholder}" readonly="readonly" unselectable="on" class="${FORM_INPUT}">
</div>
<div></div>
</div>
<dl xid="${id}" class="${DL} ${fs.config.radio ? RADIO:''}">${dinfo}</dl>
</div>`);
var $parent = $(`<div class="${PNAME}" FS_ID="${id}"></div>`);
$parent.append(reElem)
othis.after($parent);
othis.attr('lay-ignore', '');
othis.removeAttr('name') && othis.attr('_name', fs.config.formname);
othis.removeAttr('lay-verify') && othis.attr('_lay-verify', fs.config.layverify);
//如果可搜尋, 加上事件
if(fs.config.isSearch){
ajaxs[id] = $.extend({}, ajax, {searchUrl: fs.config.searchUrl}, ajaxs[id]);
$(document).on('input', `div.${PNAME}[FS_ID="${id}"] .${INPUT}`, (e) => {
this.search(id, e, fs.config.searchUrl);
});
if(fs.config.searchUrl){//觸發第一次請求事件
this.triggerSearch(reElem, true);
}
}else{//隱藏第二個dl
reElem.find(`dl dd.${FORM_DL_INPUT}`).css('display', 'none');
}
});
}
Common.prototype.search = function(id, e, searchUrl, call){
let input;
if(call){
input = call;
}else{
input = e.target;
let keyCode = e.keyCode;
if(keyCode === 9 || keyCode === 13 || keyCode === 37 || keyCode === 38 || keyCode === 39 || keyCode === 40) {
return false;
}
}
let inputValue = $.trim(input.value);
//過濾一下tips
this.changePlaceHolder($(input));
let ajaxConfig = ajaxs[id] ? ajaxs[id] : ajax;
searchUrl = ajaxConfig.searchUrl || searchUrl;
let fs = data[id],
isCreate = fs.config.isCreate,
reElem = $(`dl[xid="${id}"]`).parents(`.${FORM_SELECT}`);
//如果開啟了遠端搜尋
if(searchUrl){
if(ajaxConfig.searchVal){
inputValue = ajaxConfig.searchVal;
ajaxConfig.searchVal = '';
}
if(!ajaxConfig.beforeSearch || (ajaxConfig.beforeSearch && ajaxConfig.beforeSearch instanceof Function && ajaxConfig.beforeSearch(id, searchUrl, inputValue))){
let delay = ajaxConfig.delay;
if(ajaxConfig.first){
ajaxConfig.first = false;
delay = 10;
}
clearTimeout(fs.clearid);
fs.clearid = setTimeout(() => {
reElem.find(`dl > *:not(.${FORM_SELECT_TIPS})`).remove();
reElem.find(`dd.${FORM_NONE}`).addClass(FORM_EMPTY).text('請求中');
this.ajax(id, searchUrl, inputValue, false, null, true);
}, delay);
}
}else{
reElem.find(`dl .${DD_HIDE}`).removeClass(DD_HIDE);
//遍歷選項, 選擇可以顯示的值
reElem.find(`dl dd:not(.${FORM_SELECT_TIPS})`).each((idx, item) => {
let _item = $(item);
let searchFun = events.filter[id] || data[id].config.filter;
if(searchFun && searchFun(id, inputValue, this.getItem(id, _item), _item.hasClass(DISABLED)) == true){
_item.addClass(DD_HIDE);
}
});
//控制分組名稱
reElem.find('dl dt').each((index, item) => {
if(!$(item).nextUntil('dt', `:not(.${DD_HIDE})`).length) {
$(item).addClass(DD_HIDE);
}
});
//動態建立
this.create(id, isCreate, inputValue);
let shows = reElem.find(`dl dd:not(.${FORM_SELECT_TIPS}):not(.${DD_HIDE})`);
if(!shows.length){
reElem.find(`dd.${FORM_NONE}`).addClass(FORM_EMPTY).text('無匹配項');
}else{
reElem.find(`dd.${FORM_NONE}`).removeClass(FORM_EMPTY);
}
}
}
Common.prototype.isArray = function(obj){
return Object.prototype.toString.call(obj) == "[object Array]";
}
Common.prototype.triggerSearch = function(div, isCall){
(div ? [div] : $(`.${FORM_SELECT}`).toArray()).forEach((reElem, index) => {
reElem = $(reElem);
let id = reElem.find('dl').attr('xid')
if((id && data[id] && data[id].config.isEmpty) || isCall){
this.search(id, null, null, data[id].config.searchType == 0 ? reElem.find(`.${LABEL} .${INPUT}`) : reElem.find(`dl .${FORM_DL_INPUT} .${INPUT}`));
}
});
}
Common.prototype.clearInput = function(id){
let div = $(`.${PNAME}[fs_id="${id}"]`);
let input = data[id].config.searchType == 0 ? div.find(`.${LABEL} .${INPUT}`) : div.find(`dl .${FORM_DL_INPUT} .${INPUT}`);
input.val('');
}
Common.prototype.ajax = function(id, searchUrl, inputValue, isLinkage, linkageWidth, isSearch, successCallback, isReplace){
let reElem = $(`.${PNAME} dl[xid="${id}"]`).parents(`.${FORM_SELECT}`);
if(!reElem[0] || !searchUrl){
return ;
}
let ajaxConfig = ajaxs[id] ? ajaxs[id] : ajax;
let ajaxData = $.extend(true, {}, ajaxConfig.data);
ajaxData[ajaxConfig.searchName] = inputValue;
//是否需要對ajax新增隨機時間
//ajaxData['_'] = Date.now();
$.ajax({
type: ajaxConfig.type,
headers: ajaxConfig.header,
url: searchUrl,
data: ajaxConfig.dataType == 'json' ? JSON.stringify(ajaxData) : ajaxData,
success: (res) => {
if(typeof res == 'string'){
res = JSON.parse(res);
}
ajaxConfig.beforeSuccess && ajaxConfig.beforeSuccess instanceof Function && (res = ajaxConfig.beforeSuccess(id, searchUrl, inputValue, res));
if(this.isArray(res)){
let newRes = {};
newRes[ajaxConfig.response.statusName] = ajaxConfig.response.statusCode;
newRes[ajaxConfig.response.msgName] = "";
newRes[ajaxConfig.response.dataName] = res;
res = newRes;
}
if(res[ajaxConfig.response.statusName] != ajaxConfig.response.statusCode) {
reElem.find(`dd.${FORM_NONE}`).addClass(FORM_EMPTY).text(res[ajaxConfig.response.msgName]);
}else{
reElem.find(`dd.${FORM_NONE}`).removeClass(FORM_EMPTY);
this.renderData(id, res[ajaxConfig.response.dataName], isLinkage, linkageWidth, isSearch, isReplace);
data[id].config.isEmpty = res[ajaxConfig.response.dataName].length == 0;
}
successCallback && successCallback(id);
ajaxConfig.success && ajaxConfig.success instanceof Function && ajaxConfig.success(id, searchUrl, inputValue, res);
},
error: (err) => {
reElem.find(`dd[lay-value]:not(.${FORM_SELECT_TIPS})`).remove();
reElem.find(`dd.${FORM_NONE}`).addClass(FORM_EMPTY).text('服務異常');
ajaxConfig.error && ajaxConfig.error instanceof Function && ajaxConfig.error(id, searchUrl, inputValue, err);
}
});
}
Common.prototype.renderData = function(id, dataArr, linkage, linkageWidth, isSearch, isReplace){
if(linkage){//渲染多級聯動
this.renderLinkage(id, dataArr, linkageWidth);
return;
}
if(isReplace){
this.renderReplace(id, dataArr);
return;
}
let reElem = $(`.${PNAME} dl[xid="${id}"]`).parents(`.${FORM_SELECT}`);
let ajaxConfig = ajaxs[id] ? ajaxs[id] : ajax;
let pcInput = reElem.find(`.${TDIV} input`);
dataArr = this.exchangeData(id, dataArr);
let values = [];
reElem.find('dl').html(this.renderSelect(id, pcInput.attr('placeholder') || pcInput.attr('back'), dataArr.map((item) => {
let itemVal = $.extend({}, item, {
innerHTML: item[ajaxConfig.keyName],
value: item[ajaxConfig.keyVal],
sel: item[ajaxConfig.keySel],
disabled: item[ajaxConfig.keyDis],
type: item.type,
name: item[ajaxConfig.keyName]
});
if(itemVal.sel){
values.push(itemVal);
}
return itemVal;
})));
let label = reElem.find(`.${LABEL}`);
let dl = reElem.find('dl[xid]');
if(isSearch){//如果是遠端搜尋, 這裡需要判重
let oldVal = data[id].values;
oldVal.forEach((item, index) => {
dl.find(`dd[lay-value="${item.value}"]`).addClass(THIS);
});
values.forEach((item, index) => {
if(this.indexOf(oldVal, item) == -1){
this.addLabel(id, label, item);
dl.find(`dd[lay-value="${item.value}"]`).addClass(THIS);
oldVal.push(item);
}
});
}else{
values.forEach((item, index) => {
this.addLabel(id, label, item);
dl.find(`dd[lay-value="${item.value}"]`).addClass(THIS);
});
data[id].values = values;
}
this.commonHandler(id, label);
}
Common.prototype.renderLinkage = function(id, dataArr, linkageWidth){
let result = [],
index = 0,
temp = {"0": dataArr},
ajaxConfig = ajaxs[id] ? ajaxs[id] : ajax;
db[id] = {};
do{
let group = result[index ++] = [],
_temp = temp;
temp = {};
$.each(_temp, (pid, arr) => {
$.each(arr, (idx, item) => {
let val = {
pid: pid,
name: item[ajaxConfig.keyName],
value: item[ajaxConfig.keyVal],
};
db[id][val.value] = $.extend(item, val);
group.push(val);
let children = item[ajaxConfig.keyChildren];
if(children && children.length){
temp[val.value] = children;
}
});
});
}while(Object.getOwnPropertyNames(temp).length);
let reElem = $(`.${PNAME} dl[xid="${id}"]`).parents(`.${FORM_SELECT}`);
let html = ['<div class="xm-select-linkage">'];
$.each(result, (idx, arr) => {
let groupDiv = [`<div style="left: ${(linkageWidth-0) * idx}px;" class="xm-select-linkage-group xm-select-linkage-group${idx + 1} ${idx != 0 ? 'xm-select-linkage-hide':''}">`];
$.each(arr, (idx2, item) => {
let span = `<li title="${item.name}" pid="${item.pid}" xm-value="${item.value}"><span>${item.name}</span></li>`;
groupDiv.push(span);
});
groupDiv.push(`</div>`);
html = html.concat(groupDiv);
});
html.push('<div style="clear: both; height: 288px;"></div>');
html.push('</div>');
reElem.find('dl').html(html.join(''));
reElem.find(`.${INPUT}`).css('display', 'none');//聯動暫時不支援搜尋
}
Common.prototype.renderReplace = function(id, dataArr){
let dl = $(`.${PNAME} dl[xid="${id}"]`);
let ajaxConfig = ajaxs[id] ? ajaxs[id] : ajax;
dataArr = this.exchangeData(id, dataArr);
db[id] = dataArr;
let html = dataArr.map((item) => {
let itemVal = $.extend({}, item, {
innerHTML: item[ajaxConfig.keyName],
value: item[ajaxConfig.keyVal],
sel: item[ajaxConfig.keySel],
disabled: item[ajaxConfig.keyDis],
type: item.type,
name: item[ajaxConfig.keyName]
});
return this.createDD(id, itemVal);
}).join('');
dl.find(`dd:not(.${FORM_SELECT_TIPS}),dt:not([style])`).remove();
dl.find(`dt[style]`).after($(html));
}
Common.prototype.exchangeData = function(id, arr){//這裡處理樹形結構
let ajaxConfig = ajaxs[id] ? ajaxs[id] : ajax;
let childrenName = ajaxConfig['keyChildren'];
let disabledName = ajaxConfig['keyDis'];
db[id] = {};
let result = this.getChildrenList(arr, childrenName, disabledName, [], false);
return result;
}
Common.prototype.getChildrenList = function(arr, childrenName, disabledName, pid, disabled){
let result = [], offset = 0;
for(let a = 0; a < arr.length; a ++){
let item = arr[a];
if(item.type && item.type == 'optgroup'){
result.push(item);
continue;
}else{
offset ++;
}
let parentIds = pid.concat([]);
parentIds.push(`${offset - 1}_E`);
item[FORM_TEAM_PID] = JSON.stringify(parentIds);
item[disabledName] = item[disabledName] || disabled;
result.push(item);
let child = item[childrenName];
if(child && common.isArray(child) && child.length){
item['XM_TREE_FOLDER'] = true;
let pidArr = parentIds.concat([]);
let childResult = this.getChildrenList(child, childrenName, disabledName, pidArr, item[disabledName]);
result = result.concat(childResult);
}
}
return result;
}
Common.prototype.create = function(id, isCreate, inputValue){
if(isCreate && inputValue){
let fs = data[id],
dl = $(`[xid="${id}"]`),
tips= dl.find(`dd.${FORM_SELECT_TIPS}.${FORM_DL_INPUT}`),
tdd = null,
temp = dl.find(`dd.${TEMP}`);
dl.find(`dd:not(.${FORM_SELECT_TIPS}):not(.${TEMP})`).each((index, item) => {
if(inputValue == $(item).find('span').attr('name')){
tdd = item;
}
});
if(!tdd){//如果不存在, 則建立
let val = fs.config.create(id, inputValue);
if(temp[0]){
temp.attr('lay-value', val);
temp.find('span').text(inputValue);
temp.find('span').attr("name", inputValue);
temp.removeClass(DD_HIDE);
}else{
tips.after($(this.createDD(id, {
name: inputValue,
innerHTML: inputValue,
value: val
}, `${TEMP} ${CREATE_LONG}`)));
}
}
}else{
$(`[xid="${id}"] dd.${TEMP}`).remove();
}
}
Common.prototype.createDD = function(id, item, clz){
let name = $.trim(item.innerHTML);
db[id][item.value] = $(item).is('option') ? {name: name, value: item.value} : item;
let template = data[id].config.template(name, item.value, item.selected, item.disabled);
let pid = item[FORM_TEAM_PID];
pid ? (pid = JSON.parse(pid)) : (pid = [-1]);
let attr = pid[0] == -1 ? '' : `tree-id="${pid.join('-')}" tree-folder="${!!item['XM_TREE_FOLDER']}"`;
let ddTitleHtml = data[id].config.ddTitle?(data[id].config.ddTitle=="tip"?' onmouseout = "closeTip();" onmouseover ="tips(this,\''+(item.title.replace(/\'/g,"\\'")==""?"無說明":item.title.replace(/\'/g,"\\'"))+'\');" ':' title = "' + item.title + '" '):'';
return `<dd lay-value="${item.value}" ${ddTitleHtml} class="${item.disabled ? DISABLED : ''} ${clz ? clz : ''} ${data[id].config.radio=='hide'?RADIO_HIDE:''}" ${attr}>
<div class="xm-unselect xm-form-checkbox ${item.disabled ? DISABLED : ''}" style="margin-left: ${(pid.length - 1) * 30}px">
<i class="${CHECKBOX_YES}"></i>
<span name="${name}">${template}</span>
</div>
</dd>`;
}
Common.prototype.createQuickBtn = function(obj, right){
return `<div class="${CZ}" method="${obj.name}" title="${obj.name}" ${right ? 'style="margin-right: ' + right + '"': ''}><i class="${obj.icon}"></i><span>${obj.name}</span></div>`
}
Common.prototype.renderBtns = function(id, show, right){
let quickBtn = [];
let dl = $(`dl[xid="${id}"]`);
quickBtn.push(`<div class="${CZ_GROUP}" show="${show}" style="max-width: ${dl.prev().width() - 54}px;">`);
$.each(data[id].config.btns, (index, item) => {
quickBtn.push(this.createQuickBtn(item, right));
});
quickBtn.push(`</div>`);
quickBtn.push(this.createQuickBtn({icon: 'xm-iconfont icon-caidan', name: ''}));
return quickBtn.join('');
}
Common.prototype.renderSelect = function(id, tips, select){
db[id] = {};
let arr = [];
if(data[id].config.btns.length){
setTimeout(() => {
let dl = $(`dl[xid="${id}"]`);
dl.parents(`.${FORM_SELECT}`).attr(SEARCH_TYPE, data[id].config.searchType);
dl.find(`.${CZ_GROUP}`).css('max-width', `${dl.prev().width() - 54}px`);
}, 10);
arr.push([
`<dd lay-value="" class="${FORM_SELECT_TIPS}" style="background-color: #FFF!important;">`,
this.renderBtns(id, null, '30px'),
`</dd>`
].join(''));
}else{
arr.push(`<dd lay-value="" class="${FORM_SELECT_TIPS}">${tips}</dd>`);
}
if(data[id].config.isSearch){
arr.push([
`<dd lay-value="" class="${FORM_SELECT_TIPS} ${FORM_DL_INPUT}" style="background-color: #FFF!important;">`,
`<i class="xm-iconfont icon-sousuo"></i>`,
`<input type="text" class="${FORM_INPUT} ${INPUT}" placeholder="${data[id].config.searchPlaceholder}"/>`,
`</dd>`].join(''));
}
if(this.isArray(select)){
$(select).each((index, item) => {
if(item){
if(item.type && item.type === 'optgroup') {
arr.push(`<dt>${item.name}</dt>`);
} else {
arr.push(this.createDD(id, item));
}
}
});
}else{
$(select).find('*').each((index, item) => {
if(item.tagName.toLowerCase() == 'option' && index == 0 && !item.value){
return ;
}
if(item.tagName.toLowerCase() === 'optgroup') {
arr.push(`<dt>${item.label}</dt>`);
} else {
arr.push(this.createDD(id, item));
}
});
}
arr.push('<dt style="display:none;"> </dt>');
arr.push(`<dd class="${FORM_SELECT_TIPS} ${FORM_NONE} ${arr.length === 2 ? FORM_EMPTY:''}">沒有選項</dd>`);
return arr.join('');
}
Common.prototype.on = function(){//事件繫結
this.one();
$(document).on('click', (e) => {
if(!$(e.target).parents(`.${FORM_TITLE}`)[0]){//清空input中的值
$(`.${PNAME} dl .${DD_HIDE}`).removeClass(DD_HIDE);
$(`.${PNAME} dl dd.${FORM_EMPTY}`).removeClass(FORM_EMPTY);
$(`.${PNAME} dl dd.${TEMP}`).remove();
$.each(data, (key, fs) => {
this.clearInput(key);
if(!fs.values.length){
this.changePlaceHolder($(`div[FS_ID="${key}"] .${LABEL}`));
}
});
}
$(`.${PNAME} .${FORM_SELECTED}`).each((index, item) => {
this.changeShow($(item).find(`.${FORM_TITLE}`), false);
}) ;
});
}
Common.prototype.calcLabelLeft = function(label, w, call){
let pos = this.getPosition(label[0]);
pos.y = pos.x + label[0].clientWidth;
let left = label[0].offsetLeft;
if(!label.find('span').length){
left = 0;
}else if(call){//校正歸位
let span = label.find('span:last');
span.css('display') == 'none' ? (span = span.prev()[0]) : (span = span[0]);
let spos = this.getPosition(span);
spos.y = spos.x + span.clientWidth;
if(spos.y > pos.y){
left = left - (spos.y - pos.y) - 5;
}else{
left = 0;
}
}else{
if(w < 0){
let span = label.find(':last');
span.css('display') == 'none' ? (span = span.prev()[0]) : (span = span[0]);
let spos = this.getPosition(span);
spos.y = spos.x + span.clientWidth;
if(spos.y > pos.y){
left -= 10;
}
}else{
if(left < 0){
left += 10;
}
if(left > 0){
left = 0;
}
}
}
label.css('left', left + 'px');
}
Common.prototype.one = function(target){//一次性事件繫結
$(target ? target : document).off('click', `.${FORM_TITLE}`).on('click', `.${FORM_TITLE}`, (e) => {
let othis = $(e.target),
title = othis.is(FORM_TITLE) ? othis : othis.parents(`.${FORM_TITLE}`),
dl = title.next(),
id = dl.attr('xid');
//清空非本select的input val
$(`dl[xid]`).not(dl).each((index, item) => {
this.clearInput($(item).attr('xid'));
});
$(`dl[xid]`).not(dl).find(`dd.${DD_HIDE}`).removeClass(DD_HIDE);
//如果是disabled select
if(title.hasClass(DIS)){
return false;
}
//如果點選的是右邊的三角或者只讀的input
if(othis.is(`.${SANJIAO}`) || othis.is(`.${INPUT}[readonly]`)){
this.changeShow(title, !title.parents(`.${FORM_SELECT}`).hasClass(FORM_SELECTED));
return false;
}
//如果點選的是input的右邊, focus一下
if(title.find(`.${INPUT}:not(readonly)`)[0]){
let input = title.find(`.${INPUT}`),
epos = {x: e.pageX, y: e.pageY},
pos = this.getPosition(title[0]),
width = title.width();
while(epos.x > pos.x){
if($(document.elementFromPoint(epos.x, epos.y)).is(input)){
input.focus();
this.changeShow(title, true);
return false;
}
epos.x -= 50;
}
}
//如果點選的是可搜尋的input
if(othis.is(`.${INPUT}`)){
this.changeShow(title, true);
return false;
}
//如果點選的是x按鈕
if(othis.is(`i[fsw="${NAME}"]`)){
let val = this.getItem(id, othis),
dd = dl.find(`dd[lay-value='${val.value}']`);
if(dd.hasClass(DISABLED)){//如果是disabled狀態, 不可選, 不可刪
return false;
}
this.handlerLabel(id, dd, false, val);
return false;
}
this.changeShow(title, !title.parents(`.${FORM_SELECT}`).hasClass(FORM_SELECTED));
return false;
});
$(target ? target : document).off('click', `dl.${DL}`).on('click', `dl.${DL}`, (e) => {
let othis = $(e.target);
if(othis.is(`.${LINKAGE}`) || othis.parents(`.${LINKAGE}`)[0]){//linkage的處理
othis = othis.is('li') ? othis : othis.parents('li');
let group = othis.parents('.xm-select-linkage-group'),
id = othis.parents('dl').attr('xid');
if(!id){
return false;
}
//啟用li
group.find('.xm-select-active').removeClass('xm-select-active');
othis.addClass('xm-select-active');
//啟用下一個group, 啟用前顯示對應資料
group.nextAll('.xm-select-linkage-group').addClass('xm-select-linkage-hide');
let nextGroup = group.next('.xm-select-linkage-group');
nextGroup.find('li').addClass('xm-select-linkage-hide');
nextGroup.find(`li[pid="${othis.attr('xm-value')}"]`).removeClass('xm-select-linkage-hide');
//如果沒有下一個group, 或沒有對應的值
if(!nextGroup[0] || nextGroup.find(`li:not(.xm-select-linkage-hide)`).length == 0){
let vals = [],
index = 0,
isAdd = !othis.hasClass('xm-select-this');
if(data[id].config.radio){
othis.parents('.xm-select-linkage').find('.xm-select-this').removeClass('xm-select-this');
}
do{
vals[index ++] = {
name: othis.find('span').text(),
value: othis.attr('xm-value')
}
othis = othis.parents('.xm-select-linkage-group').prev().find(`li[xm-value="${othis.attr('pid')}"]`);
}while(othis.length);
vals.reverse();
let val = {
name: vals.map((item) => {
return item.name;
}).join('/'),
value: vals.map((item) => {
return item.value;
}).join('/'),
}
this.handlerLabel(id, null, isAdd, val);
}else{
nextGroup.removeClass('xm-select-linkage-hide');
}
return false;
}
if(othis.is('dl')){
return false;
}
if(othis.is('dt')){
othis.nextUntil(`dt`).each((index, item) => {
item = $(item);
if(item.hasClass(DISABLED) || item.hasClass(THIS)){
}else{
item.find('i:not(.icon-expand)').click();
}
});
return false;
}
let dd = othis.is('dd') ? othis : othis.parents('dd');
let id = dd.parent('dl').attr('xid');
if(dd.hasClass(DISABLED)){//被禁用選項的處理
return false;
}
//選單功效
if(othis.is('i.icon-caidan')){
let opens = [], closes = [];
othis.parents('dl').find('dd[tree-folder="true"]').each((index, item) => {
$(item).attr('xm-tree-hidn') == undefined ? opens.push(item) : closes.push(item);
});
let arr = closes.length ? closes : opens;
arr.forEach(item => item.click());
return false;
}
//樹狀結構的選擇
let treeId = dd.attr('tree-id');
if(treeId){
//忽略右邊的圖示
if(othis.is('i:not(.icon-expand)')){
this.handlerLabel(id, dd, !dd.hasClass(THIS));
return false;
}
let ajaxConfig = ajaxs[id] || ajax;
let treeConfig = ajaxConfig.tree;
let childrens = dd.nextAll(`dd[tree-id^="${treeId}"]`);
if(childrens && childrens.length){
let len = childrens[0].clientHeight;
len ? (
this.addTreeHeight(dd, len),
len = 0
) : (
len = dd.attr('xm-tree-hidn') || 36,
dd.removeAttr('xm-tree-hidn'),
dd.find('>i').remove(),
(childrens = childrens.filter((index, item) => $(item).attr('tree-id').split('-').length - 1 == treeId.split('-').length))
);
childrens.animate({
height: len
}, 150)
return false;
}else{
if(treeConfig.nextClick && treeConfig.nextClick instanceof Function){
treeConfig.nextClick(id, this.getItem(id, dd), (res) => {
if(!res || !res.length){
this.handlerLabel(id, dd, !dd.hasClass(THIS));
}else{
dd.attr('tree-folder', 'true');
let ddChilds = [];
res.forEach((item, idx) => {
item.innerHTML = item[ajaxConfig.keyName];
item[FORM_TEAM_PID] = JSON.stringify(treeId.split('-').concat([idx]));
ddChilds.push(this.createDD(id, item));
db[id][item[ajaxConfig.keyVal]] = item;
});
dd.after(ddChilds.join(''));
}
});
return false;
}
}
}
if(dd.hasClass(FORM_SELECT_TIPS)){//tips的處理
let btn = othis.is(`.${CZ}`) ? othis : othis.parents(`.${CZ}`);
if(!btn[0]){
return false;
}
let method = btn.attr('method');
let obj = data[id].config.btns.filter(bean => bean.name == method)[0];
obj && obj.click && obj.click instanceof Function && obj.click(id, this);
return false;
}
this.handlerLabel(id, dd, !dd.hasClass(THIS));
return false;
});
}
Common.prototype.addTreeHeight = function(dd, len){
let treeId = dd.attr('tree-id');
let childrens = dd.nextAll(`dd[tree-id^="${treeId}"]`);
if(childrens.length){
dd.append('<i class="xm-iconfont icon-expand"></i>');
dd.attr('xm-tree-hidn', len);
childrens.each((index, item) => {
let that = $(item);
this.addTreeHeight(that, len);
})
}
}
let db = {};
Common.prototype.getItem = function(id, value){
if(value instanceof $){
if(value.is(`i[fsw="${NAME}"]`)){
let span = value.parent();
return db[id][value] || {
name: span.find('font').text(),
value: span.attr('value')
}
}
let val = value.attr('lay-value');
return !db[id][val] ? (db[id][val] = {
name: value.find('span[name]').attr('name'),
value: val
}) : db[id][val];
}else if(typeof(value) == 'string' && value.indexOf('/') != -1){
return db[id][value] || {
name: this.valToName(id, value),
value: value
}
}
return db[id][value];
}
Common.prototype.linkageAdd = function(id, val){
let dl = $(`dl[xid="${id}"]`);
dl.find('.xm-select-active').removeClass('xm-select-active');
let vs = val.value.split('/');
let pid, li, index = 0;
let lis = [];
do{
pid = vs[index];
li = dl.find(`.xm-select-linkage-group${index + 1} li[xm-value="${pid}"]`);
li[0] && lis.push(li);
index ++;
}while(li.length && pid != undefined);
if(lis.length == vs.length){
$.each(lis, (idx, item) => {
item.addClass('xm-select-this');
});
}
}
Common.prototype.linkageDel = function(id, val){
let dl = $(`dl[xid="${id}"]`);
let vs = val.value.split('/');
let pid, li, index = vs.length - 1;
do{
pid = vs[index];
li = dl.find(`.xm-select-linkage-group${index + 1} li[xm-value="${pid}"]`);
if(!li.parent().next().find(`li[pid="${pid}"].xm-select-this`).length){
li.removeClass('xm-select-this');
}
index --;
}while(li.length && pid != undefined);
}
Common.prototype.valToName = function(id, val){
let dl = $(`dl[xid="${id}"]`);
let vs = (val + "").split('/');
if(!vs.length){
return null;
}
let names = [];
$.each(vs, (idx, item) => {
let name = dl.find(`.xm-select-linkage-group${idx + 1} li[xm-value="${item}"] span`).text();
names.push(name);
});
return names.length == vs.length ? names.join('/') : null;
}
Common.prototype.commonHandler = function(key, label){
if(!label || !label[0]){
return ;
}
this.checkHideSpan(key, label);
//計算input的提示語
this.changePlaceHolder(label);
//計算高度
this.retop(label.parents(`.${FORM_SELECT}`));
this.calcLabelLeft(label, 0, true);
//表單預設值
this.setHidnVal(key, label);
//title值
label.parents('.' + FORM_TITLE + ' .' + NAME).attr('title', data[key].config.customTitle?(data[key].config.customTitle.replace("&title&",data[key].values.map(function (val) {
return val.name;
}).join(data[key].config.customTitleSplit))):(data[key].values.map(function (val) {
return val.name;
}).join(data[key].config.customTitleSplit)));
//label.parents(`.${FORM_TITLE} .${NAME}`).attr('title', data[key].values.map((val) => {
//return val.name;
//}).join(','));
}
Common.prot