/**
|
* plugin-name:picker.js
|
* author:Van
|
* e-mail:zheng_jinfan@126.com
|
* demo-site:http://m.zhengjinfan.cn/picker/index.html
|
* homepage:http://blog.zheng_jinfan.cn
|
* createtime:2017-07-25 16:55:36
|
* MIT License
|
*/
|
layui.define(['laytpl', 'form'], function(exports) {
|
"use strict";
|
var $ = layui.jquery,
|
layer = parent.layer === undefined ? layui.layer : parent.layer,
|
form = layui.form,
|
PROVINCE = 'province',
|
CITY = 'city',
|
AREA = 'area',
|
PROVINCE_TIPS = '请选择省',
|
CITY_TIPS = '请选择市',
|
AREA_TIPS = '请选择县/区',
|
pickerType = {
|
province: 1, //省
|
city: 2, //市
|
area: 3 //区
|
},
|
DATA = [];
|
var Picker = function() {
|
//默认设置
|
this.config = {
|
elem: undefined, //存在的容器 支持类选择器和ID选择器 e.g: [.class] or [#id]
|
codeConfig: undefined, //初始值 e.g:{ code:440104,type:3 } 说明：code 为代码，type为类型 1：省、2：市、3：区/县
|
/**
|
* {
|
"code": "654325", //代码
|
"name": "青河县", //名称
|
"type": 3, //类型，1：省、2：市、3：区/县
|
"path": "650000,654300,654325", //路径： 省,市,区/县
|
"parentCode": "654300" //父代码
|
}
|
*/
|
data: undefined, //数据源，需要特定的数据结构,
|
canSearch: false, //是否支持搜索
|
// url: undefined, //远程地址，未用到
|
// type: 'GET' //请求方式,未用到
|
};
|
this.v = '1.0.0';
|
//渲染数据
|
};
|
Picker.fn = Picker.prototype;
|
//设置
|
Picker.fn.set = function(options) {
|
var that = this;
|
if (options.data)
|
DATA = options.data;
|
$.extend(true, that.config, options);
|
return that;
|
};
|
//渲染
|
Picker.fn.render = function() {
|
var that = this;
|
var config = that.config,
|
$elem = $(config.elem),
|
getDatas = function(type, parentCode, selectCode) {
|
if (DATA.length === 0)
|
throw new Error('PICKER ERROR:请设置数据源.');
|
var data = [];
|
var result = [];
|
for (var i = 0; i < DATA.length; i++) {
|
var element = DATA[i];
|
if (element.parentCode == parentCode)
|
data.push(element);
|
}
|
for (var i = 0; i < data.length; i++) {
|
var e = data[i];
|
if (e.type == type) {
|
var isSelected = selectCode == e.code;
|
result.push({
|
code: e.code,
|
name: e.name,
|
isSelected: isSelected
|
});
|
}
|
}
|
return result;
|
},
|
getAreaCodeByCode = function(options) {
|
if (DATA.length === 0)
|
throw new Error('PICKER ERROR:请设置数据源.');
|
var data = DATA;
|
var result = undefined;
|
for (var i = 0; i < data.length; i++) {
|
var e = data[i];
|
if (e.type != options.type)
|
continue;
|
if (e.code == options.code) {
|
result = e;
|
break;
|
}
|
}
|
return result !== undefined ? result.path : result;
|
},
|
tempContent = function(vid) {
|
return '<form class="layui-form">' +
|
'<div class="layui-form-item" data-action="picker_' + vid + '">' +
|
'<label class="layui-form-label">选择地区</label>' +
|
'</div>' +
|
'</form>';
|
},
|
temp = function(filterName, tipInfo) {
|
var html = '<div class="layui-input-inline" data-action="' + filterName + '">';
|
if (config.canSearch) {
|
html += '<select name="' + filterName + '" lay-filter="' + filterName + '" lay-search>';
|
} else {
|
html += '<select name="' + filterName + '" lay-filter="' + filterName + '">';
|
}
|
html += '<option value="">' + tipInfo + '</option>';
|
html += '{{# layui.each(d, function(index, item){ }}';
|
html += '{{# if(item.isSelected){ }}';
|
html += '<option value="{{ item.code }}" selected>{{ item.name }}</option>';
|
html += '{{# }else{ }}'
|
html += '<option value="{{ item.code }}">{{ item.name }}</option>';
|
html += '{{# }; }}';
|
html += '{{# }); }}';
|
html += '</select>';
|
html += '</div>';
|
return html;
|
},
|
renderData = function(type, $picker, parentCode, selectCode, init) {
|
var tempHtml = '';
|
var filter = '';
|
init = init === undefined ? true : init;
|
var pickerFilter = {
|
province: PROVINCE + that.config.vid,
|
city: CITY + that.config.vid,
|
area: AREA + that.config.vid
|
};
|
switch (type) {
|
case pickerType.province:
|
tempHtml = temp(pickerFilter.province, PROVINCE_TIPS);
|
filter = pickerFilter.province;
|
break;
|
case pickerType.city:
|
tempHtml = temp(pickerFilter.city, CITY_TIPS);
|
filter = pickerFilter.city;
|
break;
|
case pickerType.area:
|
tempHtml = temp(pickerFilter.area, AREA_TIPS);
|
filter = pickerFilter.area;
|
break;
|
}
|
layui.laytpl(tempHtml).render(getDatas(type, parentCode, selectCode), function(html) {
|
if (!init) {
|
var $has = $picker.find('div[data-action=' + filter + ']');
|
if ($has.length > 0) {
|
var $prev = $has.prev();
|
$prev.next().remove();
|
$prev.after(html);
|
if (filter == pickerFilter.city) {
|
var $hasArea = $picker.find('div[data-action=' + pickerFilter.area + ']');
|
if ($hasArea.length > 0) {
|
$hasArea.find('select[name=' + pickerFilter.area + ']')
|
.html('<option value="">请选择县/区</option>');
|
}
|
}
|
} else {
|
$picker.append(html);
|
}
|
} else {
|
$picker.append(html);
|
}
|
form.on('select(' + filter + ')', function(data) {
|
switch (data.elem.name) {
|
case pickerFilter.province:
|
renderData(pickerType.city, $picker, data.value, undefined, false);
|
break;
|
case pickerFilter.city:
|
renderData(pickerType.area, $picker, data.value, undefined, false);
|
break;
|
case pickerFilter.area:
|
//console.log('区/县');
|
break;
|
}
|
});
|
form.render('select');
|
});
|
};
|
config.vid = new Date().getTime();
|
$elem.html(tempContent(config.vid));
|
var $picker = $elem.find('div[data-action=picker_' + config.vid + ']');
|
//如果需要初始化
|
if (config.codeConfig) {
|
var path = getAreaCodeByCode(config.codeConfig);
|
var pType = config.codeConfig.type;
|
var pCode = config.codeConfig.code;
|
var arrPath = [];
|
for (var i = 0; i < path.split(',').length; i++) {
|
var e = path.split(',')[i];
|
arrPath.push(e);
|
}
|
switch (pType) {
|
case pickerType.province:
|
//渲染省
|
renderData(pickerType.province, $picker, null, arrPath[0]);
|
break;
|
case pickerType.city:
|
//渲染省
|
renderData(pickerType.province, $picker, null, arrPath[0]);
|
//渲染市
|
renderData(pickerType.city, $picker, arrPath[0], arrPath[1]);
|
break;
|
case pickerType.area:
|
//渲染省
|
renderData(pickerType.province, $picker, null, arrPath[0]);
|
//渲染市
|
renderData(pickerType.city, $picker, arrPath[0], arrPath[1]);
|
//渲染区/县
|
renderData(pickerType.area, $picker, arrPath[1], arrPath[2]);
|
break;
|
}
|
} else {
|
renderData(pickerType.province, $picker, null, undefined, true);
|
}
|
};
|
|
Picker.fn.getData = function(container)
|
{
|
var o = container.find('dl dd.layui-this');
|
|
var t1 = "{type:1,name:'',value:''},",
|
t2 = "{type:2,name:'',value:''},",
|
t3 = "{type:3,name:'',value:''}";
|
|
if(o.length > 0){
|
t1 = "{type:1,name:'" + o.html() + "',value:'" + o.attr('lay-value') + "'},";
|
}
|
if(o.length > 1){
|
t2 = "{type:2,name:'" + o.eq(1).html() + "',value:'" + o.eq(1).attr('lay-value') + "'},";
|
}
|
if(o.length > 2){
|
t3 = "{type:3,name:'" + o.eq(2).html() + "',value:'" + o.eq(2).attr('lay-value') + "'}";
|
}
|
return "[" + t1 + t2 + t3 + "]";
|
};
|
exports('picker', Picker);
|
});
|
