formSelects-v4:http://sun.faysunshine.com/layui/formSelects-v4/example/example_v4.html

201809:http://sun.faysunshine.com/layui/formSelects-v4/example/example_v4.html#select_linkage

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样式设置使下拉框显示完全 使用:

layer.open({type: 1,title: '这是一个标题',shadeClose:true,skin:'layer-ext-myskin',area: '420px',content: '<div>...</div>'});
修改
配置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){
      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(''));
    }

...}

当为单选取消选中时不关闭下拉框 

Common.prototype.handlerLabel = function(id, dd, isAdd, oval, notOn){

...

if(isAdd&&fs.config.radio){
   this.changeShow(div, false);
}

...

}

使用
根据value和name搜索显示
filter:function(id,inputVal,val,isDisabled){return val.name.indexOf(inputVal) == -1&&val.val.indexOf(inputVal) == -1;
}
设置value在下拉选项右侧显示
template: function(name,value,selected,disabled){return name + '<span style="position:absolute;right:0;color:#A0A0A0;font-size:12px;">'+value+'</span>';
}
变量
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
vals:当前select已选中的值
val:当前select点击的值
isAdd:当前操作选中or取消

isDisabled:当前选项是否是disabled

如果return false, 那么将取消本次操作

filter

自定义本地搜索过滤方式, 默认匹配文本是否包含。function(id, inputVal, val, isDisabled){...}

id:点击select的id
inputVal:当前input搜索框中的数值
val:格式:{"name":"上海","val":"2"}
isDisabled:当前options是否被禁用
returntrue时该选项被过滤,隐藏不显示

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') { // 支持 CommonJSmodule.exports = factory();} else if(typeof define === 'function' && define.amd) { // 支持 AMDdefine(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();//构造渲染divlet 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{//隐藏第二个dlreElem.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);//过滤一下tipsthis.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 selectif(title.hasClass(DIS)){return false;}//如果点击的是右边的三角或者只读的inputif(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;}}//如果点击的是可搜索的inputif(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;}//激活ligroup.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.prototype.initVal = function(id){let target = {};if(id){target[id] = data[id];}else{target = data;}$.each(target, (key, val) => {let values = val.values,div = $(`dl[xid="${key}"]`).parent(),label = div.find(`.${LABEL}`),dl = div.find('dl');dl.find(`dd.${THIS}`).removeClass(THIS);let _vals = values.concat([]);_vals.concat([]).forEach((item, index) => {this.addLabel(key, label, item);dl.find(`dd[lay-value="${item.value}"]`).addClass(THIS);});if(val.config.radio){_vals.length && values.push(_vals[_vals.length - 1]);}this.commonHandler(key, label);});}Common.prototype.setHidnVal = function(key, label) {if(!label || !label[0]) {return;}label.parents(`.${PNAME}`).find(`.${HIDE_INPUT}`).val(data[key].values.map((val) => {return val.value;}).join(','));}Common.prototype.handlerLabel = function(id, dd, isAdd, oval, notOn){let div = $(`[xid="${id}"]`).prev().find(`.${LABEL}`),val = dd && this.getItem(id, dd),vals = data[id].values,on = data[id].config.on || events.on[id],endOn = data[id].config.endOn || events.endOn[id];if(oval){val = oval;}let fs = data[id];if(isAdd && fs.config.max && fs.values.length >= fs.config.max){let maxTipsFun = events.maxTips[id] || data[id].config.maxTips;maxTipsFun && maxTipsFun(id, vals.concat([]), val, fs.config.max);return ;}if(!notOn){if(on && on instanceof Function && on(id, vals.concat([]), val, isAdd, dd && dd.hasClass(DISABLED)) == false) {return ;}}let dl = $(`dl[xid="${id}"]`);isAdd ? ((dd && dd[0] ? (dd.addClass(THIS),dd.removeClass(TEMP)) : (dl.find('.xm-select-linkage')[0] && this.linkageAdd(id, val))),this.addLabel(id, div, val),vals.push(val)) : ((dd && dd[0] ? (dd.removeClass(THIS)) : (dl.find('.xm-select-linkage')[0] && this.linkageDel(id, val))),this.delLabel(id, div, val),this.remove(vals, val));if(!div[0]) return ;//单选选完后直接关闭选择域if(fs.config.radio){this.changeShow(div, false);}//移除表单验证的红色边框div.parents(`.${FORM_TITLE}`).prev().removeClass('layui-form-danger');//清空搜索值fs.config.clearInput && this.clearInput(id);this.commonHandler(id, div);!notOn && endOn && endOn instanceof Function && endOn(id, vals.concat([]), val, isAdd, dd && dd.hasClass(DISABLED));}Common.prototype.addLabel = function(id, div, val){if(!val) return ;let tips = `fsw="${NAME}"`;let [$label, $close] = [$(`<span ${tips} value="${val.value}"><font ${tips}>${val.name}</font></span>`),$(`<i ${tips} class="xm-iconfont icon-close"></i>`)];$label.append($close);//如果是radio模式let fs = data[id];if(fs.config.radio){fs.values.length = 0;$(`dl[xid="${id}"]`).find(`dd.${THIS}:not([lay-value="${val.value}"])`).removeClass(THIS);div.find('span').remove();}//如果是固定高度div.find('input').css('width', '50px');div.find('input').before($label);}Common.prototype.delLabel = function(id, div, val){if(!val) return ;div.find(`span[value="${val.value}"]:first`).remove();}Common.prototype.checkHideSpan = function(id, div){let parentHeight = div.parents(`.${NAME}`)[0].offsetHeight + 5;div.find('span.xm-span-hide').removeClass('xm-span-hide');div.find('span[style]').remove();let count = data[id].config.showCount;div.find('span').each((index, item) => {if(index >= count){$(item).addClass('xm-span-hide');}});let prefix = div.find(`span:eq(${count})`);prefix[0] && prefix.before($(`<span style="padding-right: 6px;" fsw="${NAME}"> + ${div.find('span').length - count}</span>`))}Common.prototype.retop = function(div){//计算dl显示的位置let dl = div.find('dl'),top = div.offset().top + div.outerHeight() + 5 - $win.scrollTop(),dlHeight = dl.outerHeight();let up = div.hasClass('layui-form-selectup') || dl.css('top').indexOf('-') != -1 || (top + dlHeight > $win.height() && top >= dlHeight);div = div.find(`.${NAME}`);let fs = data[dl.attr('xid')];let base = dl.parents('.layui-form-pane')[0] && dl.prev()[0].clientHeight > 38 ? 14 : 10;if((fs && fs.config.direction == 'up') || up){up = true;if((fs && fs.config.direction == 'down')){up = false;}}let reHeight = div[0].offsetTop + div.height() + base;if(up) {dl.css({top: 'auto',bottom: reHeight + 3 + 'px',});} else {dl.css({top: reHeight + 'px',bottom: 'auto'});}}Common.prototype.changeShow = function(children, isShow){//显示于隐藏$('.layui-form-selected').removeClass('layui-form-selected');let top = children.parents(`.${FORM_SELECT}`),realShow = top.hasClass(FORM_SELECTED),id = top.find('dl').attr('xid');$(`.${PNAME} .${FORM_SELECT}`).not(top).removeClass(FORM_SELECTED);if(isShow){this.retop(top);top.addClass(FORM_SELECTED);top.find(`.${INPUT}`).focus();if(!top.find(`dl dd[lay-value]:not(.${FORM_SELECT_TIPS})`).length){top.find(`dl .${FORM_NONE}`).addClass(FORM_EMPTY);}}else{top.removeClass(FORM_SELECTED);this.clearInput(id);top.find(`dl .${FORM_EMPTY}`).removeClass(FORM_EMPTY);top.find(`dl dd.${DD_HIDE}`).removeClass(DD_HIDE);top.find(`dl dd.${TEMP}`).remove();//计算ajax数据是否为空, 然后重新请求数据if(id && data[id] && data[id].config.isEmpty){this.triggerSearch(top);}this.changePlaceHolder(top.find(`.${LABEL}`));}if(isShow != realShow){let openFun = data[id].config.opened || events.opened[id];isShow && openFun && openFun instanceof Function && openFun(id);let closeFun = data[id].config.closed || events.closed[id];!isShow && closeFun && closeFun instanceof Function && closeFun(id);}}Common.prototype.changePlaceHolder = function(div){//显示于隐藏提示语//调整pane模式下的高度let title = div.parents(`.${FORM_TITLE}`);title[0] || (title = div.parents(`dl`).prev());if(!title[0]){return ;}let id = div.parents(`.${PNAME}`).find(`dl[xid]`).attr('xid');if(data[id] && data[id].config.height){//既然固定高度了, 那就看着办吧}else{let height = title.find(`.${NAME}`)[0].clientHeight;title.css('height' , (height > 36 ? height + 4 : height) + 'px');//如果是layui pane模式, 处理label的高度let label = title.parents(`.${PNAME}`).parent().prev();if(label.is('.layui-form-label') && title.parents('.layui-form-pane')[0]){height = height > 36 ? height + 4 : height;title.css('height' , height + 'px');label.css({height: height + 2 + 'px',lineHeight: (height - 18) + 'px'})}}let input = title.find(`.${TDIV} input`),isShow = !div.find('span:last')[0] && !title.find(`.${INPUT}`).val();if(isShow){let ph = input.attr('back');input.removeAttr('back');input.attr('placeholder', ph);}else{let ph = input.attr('placeholder');input.removeAttr('placeholder');input.attr('back', ph)}}Common.prototype.indexOf = function(arr, val){for(let i = 0; i < arr.length; i++) {if(arr[i].value == val || arr[i].value == (val ? val.value : val) || arr[i] == val || JSON.stringify(arr[i]) == JSON.stringify(val)) {return i;}}return -1;}Common.prototype.remove = function(arr, val){let idx = this.indexOf(arr, val ? val.value : val);if(idx > -1) {arr.splice(idx, 1);return true;}return false;}Common.prototype.selectAll = function(id, isOn, skipDis){let dl = $(`[xid="${id}"]`);if(!dl[0]){return ;}if(dl.find('.xm-select-linkage')[0]){return ;}dl.find(`dd[lay-value]:not(.${FORM_SELECT_TIPS}):not(.${THIS})${skipDis ? ':not(.'+DISABLED+')' :''}`).each((index, item) => {item = $(item);let val = this.getItem(id, item);this.handlerLabel(id, dl.find(`dd[lay-value="${val.value}"]`), true, val, !isOn);});}Common.prototype.removeAll = function(id, isOn, skipDis){let dl = $(`[xid="${id}"]`);if(!dl[0]){return ;}if(dl.find('.xm-select-linkage')[0]){//针对多级联动的处理data[id].values.concat([]).forEach((item, idx) => {let vs = item.value.split('/');let pid, li, index = 0;do{pid = vs[index ++];li = dl.find(`.xm-select-linkage-group${index}:not(.xm-select-linkage-hide) li[value="${pid}"]`);li.click();}while(li.length && pid != undefined);});return ;}data[id].values.concat([]).forEach((item, index) => {if(skipDis && dl.find(`dd[lay-value="${item.value}"]`).hasClass(DISABLED)){}else{this.handlerLabel(id, dl.find(`dd[lay-value="${item.value}"]`), false, item, !isOn);}});}Common.prototype.reverse = function(id, isOn, skipDis){let dl = $(`[xid="${id}"]`);if(!dl[0]){return ;}if(dl.find('.xm-select-linkage')[0]){return ;}dl.find(`dd[lay-value]:not(.${FORM_SELECT_TIPS})${skipDis ? ':not(.'+DISABLED+')' :''}`).each((index, item) => {item = $(item);let val = this.getItem(id, item);this.handlerLabel(id, dl.find(`dd[lay-value="${val.value}"]`), !item.hasClass(THIS), val, !isOn);});}Common.prototype.skin = function(id){let skins = ['default' ,'primary', 'normal', 'warm', 'danger'];let skin = skins[Math.floor(Math.random() * skins.length)];$(`dl[xid="${id}"]`).parents(`.${PNAME}`).find(`.${FORM_SELECT}`).attr('xm-select-skin', skin);this.check(id) && this.commonHandler(id, $(`dl[xid="${id}"]`).parents(`.${PNAME}`).find(`.${LABEL}`));}Common.prototype.getPosition = function(e){let x = 0, y = 0;while (e != null) {x += e.offsetLeft;y += e.offsetTop;e = e.offsetParent;}return { x: x, y: y };};Common.prototype.onreset = function(){//监听reset按钮, 然后重置多选$(document).on('click', '[type=reset]', (e) => {$(e.target).parents('form').find(`.${PNAME} dl[xid]`).each((index, item) => {let id = item.getAttribute('xid'),dl = $(item),dd,temp = {};common.removeAll(id);data[id].config.init.forEach((val, idx) => {if(val && (!temp[val] || data[id].config.repeat) && (dd = dl.find(`dd[lay-value="${val.value}"]`))[0]){common.handlerLabel(id, dd, true);temp[val] = 1;}});})});}Common.prototype.bindEvent = function(name, id, fun){if(id && id instanceof Function){fun = id;id = null;}if(fun && fun instanceof Function){if(!id){$.each(data, (id, val) => {data[id] ? (data[id].config[name] = fun) : (events[name][id] = fun)})}else{data[id] ? (data[id].config[name] = fun, delete events[name][id]) : (events[name][id] = fun)}}}Common.prototype.check = function(id, notAutoRender){if($(`dl[xid="${id}"]`).length) {return true;}else if($(`select[xm-select="${id}"]`).length){if(!notAutoRender){this.render(id, $(`select[xm-select="${id}"]`));return true;}}else{delete data[id];return false;}}Common.prototype.render = function(id, select){common.init(select);common.one($(`dl[xid="${id}"]`).parents(`.${PNAME}`));common.initVal(id);}Common.prototype.log = function(obj){console.log(obj);}let Select4 = function(){this.v = v;this.render();};let common = new Common();Select4.prototype.value = function(id, type, isAppend){if(typeof id != 'string'){return [];}let fs = data[id];if(!common.check(id)){return [];}if(typeof type == 'string' || type == undefined){let arr = fs.values.concat([]) || [];if(type == 'val') {return arr.map((val) => {return val.value;});}if(type == 'valStr') {return arr.map((val) => {return val.value;}).join(',');}if(type == 'name') {return arr.map((val) => {return val.name;});}if(type == 'nameStr') {return arr.map((val) => {return val.name;}).join(',');}return arr;}if(common.isArray(type)) {let dl = $(`[xid="${id}"]`),temp = {},dd,isAdd = true;if(isAppend == false){//删除传入的数组isAdd = false;}else if(isAppend == true){//追加模式isAdd = true;}else{//删除原有的数据common.removeAll(id);}if(isAdd){fs.values.forEach((val, index) => {temp[val.value] = 1;});}type.forEach((val, index) => {if(val && (!temp[val] || fs.config.repeat)){if((dd = dl.find(`dd[lay-value="${val}"]`))[0]){common.handlerLabel(id, dd, isAdd, null, true);temp[val] = 1;}else{let name = common.valToName(id, val);if(name){common.handlerLabel(id, dd, isAdd, common.getItem(id, val), true);temp[val] = 1;}}}});}}Select4.prototype.on = function(id, fun, isEnd) {common.bindEvent(isEnd ? 'endOn' : 'on', id, fun);return this;}Select4.prototype.filter = function(id, fun){common.bindEvent('filter', id, fun);return this;}Select4.prototype.maxTips = function(id, fun){common.bindEvent('maxTips', id, fun);return this;}Select4.prototype.opened = function(id, fun){common.bindEvent('opened', id, fun);return this;}Select4.prototype.closed = function(id, fun){common.bindEvent('closed', id, fun);return this;}Select4.prototype.config = function(id, config, isJson){if(id && typeof id == 'object'){isJson = config == true;config = id;id = null;}if(config && typeof config== 'object'){if(isJson){config.header || (config.header = {});config.header['Content-Type'] = 'application/json; charset=UTF-8';config.dataType = 'json';}id ? (ajaxs[id] = $.extend(true, {}, ajaxs[id] || ajax, config), !common.check(id) && this.render(id),data[id] && config.direction && (data[id].config.direction = config.direction),data[id] && config.clearInput && (data[id].config.clearInput = true),config.searchUrl && data[id] && common.triggerSearch($(`.${PNAME} dl[xid="${id}"]`).parents(`.${FORM_SELECT}`), true)) : ($.extend(true, ajax, config),$.each(ajaxs, (key, item) => {$.extend(true, item, config)}));}return this;}Select4.prototype.render = function(id, options){if(id && typeof id == 'object'){options = id;id = null;}let config = options ? {init: options.init,disabled: options.disabled,max: options.max,isSearch: options.isSearch,searchUrl: options.searchUrl,isCreate: options.isCreate,radio: options.radio,skin: options.skin,direction: options.direction,height: options.height,formname: options.formname,layverify: options.layverify,layverType: options.layverType,showCount: options.showCount,placeholder: options.placeholder,create: options.create,filter: options.filter,maxTips: options.maxTips,on: options.on,on: options.on,opened: options.opened,closed: options.closed,template: options.template,clearInput: options.clearInput,} : {};options && options.searchType != undefined && (config.searchType = options.searchType == 'dl' ? 1 : 0);if(id){fsConfigs[id] = {};$.extend(fsConfigs[id], data[id] ? data[id].config : {}, config);}else{$.extend(fsConfig, config);}($(`select[${NAME}="${id}"]`)[0] ? $(`select[${NAME}="${id}"]`) : $(`select[${NAME}]`)).each((index, select) => {let sid = select.getAttribute(NAME);common.render(sid, select);setTimeout(() => common.setHidnVal(sid, $(`select[xm-select="${sid}"] + div.${PNAME} .${LABEL}`)), 10);});return this;}Select4.prototype.disabled = function(id){let target = {};id ? (common.check(id) && (target[id] = data[id])) : (target = data);$.each(target, (key, val) => {$(`dl[xid="${key}"]`).prev().addClass(DIS);});return this;}Select4.prototype.undisabled = function(id){let target = {};id ? (common.check(id) && (target[id] = data[id])) : (target = data);$.each(target, (key, val) => {$(`dl[xid="${key}"]`).prev().removeClass(DIS);});return this;}Select4.prototype.data = function(id, type, config){if(!id || !type || !config){common.log(`id: ${id} param error !!!`)return this;}if(!common.check(id)){common.log(`id: ${id} not render !!!`)return this;}this.value(id, []);this.config(id, config);if(type == 'local'){common.renderData(id, config.arr, config.linkage == true, config.linkageWidth ? config.linkageWidth : '100');}else if(type == 'server'){common.ajax(id, config.url, config.keyword, config.linkage == true, config.linkageWidth ? config.linkageWidth : '100');}return this;}Select4.prototype.btns = function(id, btns, config){if(id && common.isArray(id)){btns = id;id = null;}if(!btns || !common.isArray(btns)) {return this;};let target = {};id ? (common.check(id) && (target[id] = data[id])) : (target = data);btns = btns.map((obj) => {if(typeof obj == 'string'){if(obj == 'select'){return quickBtns[0];}if(obj == 'remove'){return quickBtns[1];}if(obj == 'reverse'){return quickBtns[2];}if(obj == 'skin'){return quickBtns[3];}}return obj;});$.each(target, (key, val) => {val.config.btns = btns;let dd = $(`dl[xid="${key}"]`).find(`.${FORM_SELECT_TIPS}:first`);if(btns.length){let show = config && config.show && (config.show == 'name' || config.show == 'icon') ? config.show : '';let html = common.renderBtns(key, show, config && config.space ? config.space : '30px');dd.html(html);}else{let pcInput = dd.parents(`.${FORM_SELECT}`).find(`.${TDIV} input`);let html = pcInput.attr('placeholder') || pcInput.attr('back');dd.html(html);dd.removeAttr('style');}});return this;}Select4.prototype.search = function(id, val){if(id && common.check(id)){ajaxs[id] = $.extend(true, {}, ajaxs[id] || ajax, {first: true,searchVal: val});common.triggerSearch($(`dl[xid="${id}"]`).parents(`.${FORM_SELECT}`), true);}return this;}Select4.prototype.replace = function(id, type, config){if(!id || !type || !config){common.log(`id: ${id} param error !!!`)return this;}if(!common.check(id, true)){common.log(`id: ${id} not render !!!`)return this;}let oldVals = this.value(id, 'val');this.value(id, []);this.config(id, config);if(type == 'local'){common.renderData(id, config.arr, config.linkage == true, config.linkageWidth ? config.linkageWidth : '100', false, true);this.value(id, oldVals, true);}else if(type == 'server'){common.ajax(id, config.url, config.keyword, config.linkage == true, config.linkageWidth ? config.linkageWidth : '100', false, (id) => {this.value(id, oldVals, true);}, true);}}return new Select4();
});var tipIndex;
function tips(el,t){if(t.replace(/\s+/g,"").length>0){var that = $(el).find("div .formSelectsTemplate")[0]?$(el).find("div .formSelectsTemplate"):$(el);tipIndex = layer.tips(t,that,{tips:[3,"rgb(178, 178, 178, 0.85)"]});}else{closeTip();}
};
function closeTip(){layer.close(tipIndex);
};

layui多选下拉使用笔记相关推荐

  1. layui多选下拉框,多选

    1 先下载xm-select.js,如果layui.js中有就不用了,js中的xmSelect对象在引用xm-select.js后可以直接使用 2 添加多选下拉框标签 <div class=&q ...

  2. layui多选下拉框

    HTML代码 <select class="param_belong" multiple="multiple" lay-filter="sele ...

  3. layui多选下拉框,多选,使用xm-select插件

    1. layui的多选下拉框可以使用 xm-select 插件实现.使用步骤如下:1. 下载 xm-select 插件,并在页面中引入: html <link rel="stylesh ...

  4. Angular实现虚拟滚动多选下拉框笔记

    要求: 实现一个angular多选下拉框组件,当有超过2000个选项时,滑动/挑选/全选均不卡. 正篇: 为了方便,这里不考虑扩展性,所以规定下拉框展开只显示7行数据,行高27px 约定:input为 ...

  5. layui怎么给下拉框赋值_layui给select下拉框赋值

    转: layui给select下拉框赋值 //重新渲染表单函数 function renderForm() { layui.use('form', function() { var form = la ...

  6. select实现---多选下拉框

    select列表多选下拉框 注意:formSelects v4的一些操作: https://blog.csdn.net/zyc050707/article/details/109809503 1.引入 ...

  7. layui给select下拉框赋值

    layui给select下拉框赋值 //重新渲染表单函数function renderForm() {layui.use('form', function() {var form = layui.fo ...

  8. html css 多选下拉框,jQuery多选下拉框插件

    jquery.multi-select.js是一款jQuery多选下拉框插件.该插件可以将select元素转换为带checkbox的多选下拉框,非常实用. 使用方法 在页面中引入下面的文件. lt;l ...

  9. extjs多选下拉树

    extjs多选下拉树 发表于 2012 年 7 月 15 日 由 q601046124 extjs多选下拉树       extjs多选下拉树 详情 见  http://blog.aigouw.net ...

最新文章

  1. 【牛腩新闻发布系统】系统发布06
  2. Unity之Update与FixedUpdate区别
  3. php unlike,PHP结合jQuery实现的评论顶、踩功能
  4. 廖雪峰python2.7教程_Python 2.7教程
  5. 假期周进度总计(四)
  6. 放弃winform的窗体吧,改用html作界面,桌面应用程序UI的新的开发方式。
  7. 虚拟路由器冗余协议VRRP原理详解!
  8. Java SE 第二十三讲----static关键字and final关键字
  9. 苹果全面开放漏洞奖励计划:最高100万美元等你拿
  10. 基于Struts开发网上商城购物系统
  11. stata15中文乱码_如何解决 Stata 14 的中文乱码问题?Chinese support in Stata 14
  12. jq-ui的Sortable插件 两列布局 左右拖拽
  13. 智能家居linux 源码,搭建开源智能家居系统Domoticz
  14. java fillrect_Java的graphics2D fillRect不能正常工作与半透明的颜色
  15. 百度webuploader上传到阿里OSS
  16. 前端js生成条形码和EAN商品码(69码)
  17. 差距:我是如何一步步落后于别人
  18. 基于卷积神经网络 CNN 的猫狗识别详细过程
  19. linux arm xenomai,Wiki - Xenomai
  20. 服务器芯片市场国产,飞腾发布国产腾云 S2500服务器芯片 2020中国服务器行业市场全景调研...

热门文章

  1. linux ant命令 出错,linux ant 解决 错误: 找不到或无法加载主类 org.apache.tools.ant.launch.Launcher...
  2. 感谢琼琼替我写的演讲稿
  3. Win7使用Win7codecs导致资源管理器重启的解决办法
  4. python win10 ffmpeg_win10系统ffmpeg命令初体验
  5. C++ const成员函数
  6. 破窗效应-谁在打破第一扇窗户?(转)
  7. 《Sibelius 脚本程序设计》连载(二十) - 2.7 条件语句
  8. 华为云“普惠AI”十字箴言
  9. 【JZOJ 4637】 大鱼海棠
  10. 《Getting Started with D3》填坑之旅(六):第三章(下)