/** * 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 '
' + '
' + '' + '
' + '
'; }, temp = function(filterName, tipInfo) { var html = '
'; if (config.canSearch) { html += ''; } html += ''; html += '{{# layui.each(d, function(index, item){ }}'; html += '{{# if(item.isSelected){ }}'; html += ''; html += '{{# }else{ }}' html += ''; html += '{{# }; }}'; html += '{{# }); }}'; html += ''; html += '
'; 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(''); } } } 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); });