selectN.js
7.54 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
/*
* @version: 1.2
* @Author: tomato
* @Date: 2018-4-24 22:56:00
* @Last Modified by: tomato
* @Last Modified time: 2018-5-26 18:08:43
*/
//无限级下拉框
layui.define(['jquery', 'form'], function(exports){
var MOD_NAME = 'selectN';
var $ = layui.jquery;
var form = layui.form;
var obj = function(config){
//当前选中数据值名数据
this.selected =[];
//当前选中的值
this.values = [];
//当前选中的名
this.names = [];
//当前选中最后一个值
this.lastValue = '';
//当前选中最后一个值
this.lastName = '';
//是否已选
this.isSelected = false;
//初始化配置
this.config = {
//选择器id或class
elem: '',
//无限级分类数据
data: [],
//默认选中值
selected: [],
//空值项提示,可设置为数组['请选择省','请选择市','请选择县']
tips: '请选择',
//是否允许搜索,可设置为数组[true,true,true]
search:false,
//选择项宽度,可设置为数组['80','90','100']
width:null,
//为真只取最后一个值
last: false,
//值验证,与lay-verify一致
verify: '',
//事件过滤器,lay-filter名
filter: '',
//input的name 不设置与选择器相同(去#.)
name: '',
//数据分隔符
delimiter: ',',
//数据的键名 status=0为禁用状态
field:{idName:'id',titleName:'name',statusName:'status',childName:'children'},
//多表单区分 form.render(type, filter); 为class="layui-form" 所在元素的 lay-filter="" 的值
formFilter: null
}
//实例化配置
this.config = $.extend(this.config,config);
//“请选择”文字
this.setTips = function(){
var o = this,c = o.config;
if(Object.prototype.toString.call(c.tips)!='[object Array]'){
return c.tips;
}
else{
var i=$(c.elem).find('select').length;
return c.tips.hasOwnProperty(i) ? c.tips[i] : '请选择';
}
}
//设置是否允许搜索
this.setSearch = function(){
var o = this,c = o.config;
if(Object.prototype.toString.call(c.search)!='[object Array]'){
return c.search===true ? 'lay-search ' : ' ';
}
else{
var i=$(c.elem).find('select').length;
if(c.search.hasOwnProperty(i)){
return c.search[i]===true ? 'lay-search ' : ' ';
}
}
return ' ';
}
//设置是否允许搜索
this.setWidth = function(){
var o = this,c = o.config;
if(Object.prototype.toString.call(c.width)!='[object Array]'){
return /^\d+$/.test(c.width) ? 'style="width:'+c.width+'px;" ' : ' ';
}
else{
var i=$(c.elem).find('select').length;
if(c.width.hasOwnProperty(i)){
return /^\d+$/.test(c.width[i]) ? 'style="width:'+c.width[i]+'px;" ' : ' ';
}
}
}
//创建一个Select
this.createSelect = function(optionData){
var o = this,c = o.config,f=c.field;
var html = '';
html+= '<div class="layui-input-inline" '+o.setWidth()+'>';
html+= ' <select '+o.setSearch()+'lay-filter="'+c.filter+'">';
html+= ' <option value="">'+o.setTips()+'</option>';
for(var i=0;i<optionData.length;i++){
var disabled = optionData[i][f.statusName]==0 ? 'disabled="" ' : '';
html+= ' <option '+disabled+'value="'+optionData[i][f.idName]+'">'+optionData[i][f.titleName]+'</option>';
}
html+= ' </select>';
html+= '</div>';
return html;
};
//获取当前option的数据
this.getOptionData=function(catData,optionIndex){
var f = this.config.field;
var item = catData;
for(var i=0;i<optionIndex.length;i++){
if('undefined' == typeof item[optionIndex[i]]){
item = null;
break;
}
else if('undefined' == typeof item[optionIndex[i]][f.childName]){
item = null;
break;
}
else{
item = item[optionIndex[i]][f.childName];
}
}
return item;
};
//初始化
this.set = function(selected){
var o = this,c = o.config;
$E = $(c.elem);
//创建顶级select
var verify = c.verify=='' ? '' : 'lay-verify="'+c.verify+'" ';
var html = '<div style="height:0px;width:0px;overflow:hidden"><input '+verify+'name="'+c.name+'"></div>';
html += o.createSelect(c.data);
$E.html(html);
selected = typeof selected=='undefined' ? c.selected : selected;
var index=[];
for(var i=0;i<selected.length;i++){
//设置最后一个select的选中值
$E.find('select:last').val(selected[i]);
//获取该选中值的索引
var lastIndex = $E.find('select:last').get(0).selectedIndex-1;
index.push(lastIndex);
//取出下级的选项值
var childItem = o.getOptionData(c.data,index);
//下级选项值存在则创建select
if(childItem){
var html = o.createSelect(childItem);
$E.append(html);
}
}
form.render('select',c.formFilter);
o.getSelected();
};
//下拉事件
this.change = function(elem){
var o = this,c = o.config;
var $thisItem = elem.parent();
//移除后面的select
$thisItem.nextAll('div.layui-input-inline').remove();
var index=[];
//获取所有select,取出选中项的值和索引
$thisItem.parent().find('select').each(function(){
index.push($(this).get(0).selectedIndex-1);
});
var childItem = o.getOptionData(c.data,index);
if(childItem){
var html = o.createSelect(childItem);
$thisItem.after(html);
form.render('select',c.formFilter);
}
o.getSelected();
};
//获取所有值-数组 每次选择后执行
this.getSelected=function(){
var o = this,c = o.config;
var values =[];
var names =[];
var selected =[];
$E = $(c.elem);
$E.find('select').each(function(){
var item = {};
var v = $(this).val()
var n = $(this).find('option:selected').text();
item.value = v;
item.name = n;
values.push(v);
names.push(n);
selected.push(item);
});
o.selected =selected;
o.values = values;
o.names = names;
o.lastValue = $E.find('select:last').val();
o.lastName = $E.find('option:selected:last').text();
o.isSelected = o.lastValue=='' ? false : true;
var inputVal = c.last===true ? o.lastValue : o.values.join(c.delimiter);
$E.find('input[name='+c.name+']').val(inputVal);
};
//ajax方式获取候选数据
this.getData = function(url){
var d;
$.ajax({
url:url,
dataType:'json',
async:false,
success:function(json){
d=json;
},
error: function(){
console.error(MOD_NAME+' hint:候选数据ajax请求错误 ');
d = false;
}
});
return d;
}
};
//渲染一个实例
obj.prototype.render = function(){
var o=this,c=o.config;
$E = $(c.elem);
if($E.length==0){
console.error(MOD_NAME+' hint:找不到容器 '+c.elem);
return false;
}
if(Object.prototype.toString.call(c.data)!='[object Array]'){
var data = o.getData(c.data);
if(data===false){
console.error(MOD_NAME+' hint:缺少分类数据');
return false;
}
o.config.data = data;
}
c.filter = c.filter=='' ? c.elem.replace('#','').replace('.','') : c.filter;
c.name = c.name=='' ? c.elem.replace('#','').replace('.','') : c.name;
o.config = c;
//初始化
o.set();
//监听下拉事件
form.on('select('+c.filter+')',function(data){
o.change($(data.elem));
});
//验证失败样式
$E.find('input[name='+c.name+']').focus(function(){
var t = $(c.elem).offset().top;
$('html,body').scrollTop(t-200);
$(c.elem).find('select:last').addClass('layui-form-danger');
setTimeout(function(){
$(c.elem).find('select:last').removeClass('layui-form-danger');
},3000);
});
}
//输出模块
exports(MOD_NAME, function (config) {
var _this = new obj(config);
_this.render();
return _this;
});
});