/** * @ name : citySelect 省市區三級選擇模塊 * @ Author: aggerChen * @ version: 1.0 */layui.define(['layer','form','element','laytpl'], function(exports){ var $ = layui.$; var form = layui.form; var laytpl = layui.laytpl; var element = layui.emelemt;  //外部接口 var citySelect = {   config: {} //全局配置項   ,cache: {} //數據緩存   ,index: layui.laypage ? (layui.laypage.index + 10000) : 0 };  //操作當前實例 var thisSelect = function(){   var that = this,   options = that.config,   id = options.id;   id && (thisSelect.config[id] = options);      return {    reload: function(options){    that.reload.call(that, options);    },    config: options   } };  //字符常量 var MOD_NAME = 'citySelect';  //主模板 var TPL_MAIN = ['<div class="layui-form-item" >',   '<label class="layui-form-label">{{ d.data.lableName }}</label>',   '<div class="layui-input-inline" style="width:160px">',    '<select name="{{ d.data.filed.provinceName }}" class="{{ d.data.id }}_selectCity" id="citySelect_{{ d.data.filed.provinceName }}{{ d.index }}" lay-filter="province{{ d.index }}" {{#if(d.data.search){ }} lay-search {{# } }} {{#if(d.data.required){ }} lay-verify="required" {{# } }} {{#if(d.data.disabled){ }} disabled {{# } }} >',    '<option value="000000">-- 全部 --</option>',    '</select>',   '</div>',   '<div class="layui-input-inline" style="width:161px">',    '<select name="{{ d.data.filed.cityName }}" class="{{ d.data.id }}_selectCity" id="citySelect_{{ d.data.filed.cityName }}{{ d.index }}" lay-filter="city{{ d.index }}" {{#if(d.data.search){ }} lay-search {{# } }} {{#if(d.data.required){ }} lay-verify="required" {{# } }} {{#if(d.data.disabled){ }} disabled {{# } }} >',    '<option value="">-- 全部 --</option>',    '</select>',   '</div>',   '{{# if(d.data.filed.area){ }}',   '<div class="layui-input-inline" style="width:161px">',    '<select name="{{ d.data.filed.areaName }}" class="{{ d.data.id }}_selectCity" id="citySelect_{{ d.data.filed.areaName }}{{ d.index }}" lay-filter="area{{ d.index }}" {{#if(d.data.search){ }} lay-search {{# } }} {{#if(d.data.required){ }} lay-verify="required" {{# } }} {{#if(d.data.disabled){ }} disabled {{# } }} >',    '<option value="">-- 全部 --</option>',    '</select>',   '</div>',   '{{# } }}',      '{{# if(d.data.msg){ }}',    '<div class="layui-form-mid layui-word-aux">{{ d.data.msg }}</div>',    '{{# } }}',   '</div>'  ].join(""); //選項模板 var TPL_OPTION = [         '<option value="">-- 全部 --</option>',         '{{# layui.each(d.data,function(index,item){ }}',         '<option class="ajaxOption" value="{{ item[d.options.filed.regionId] }}" {{#if(d.options.selectedArr.length>0 && ($.inArray(item[d.options.filed.regionId], d.options.selectedArr)!=-1)){ }} selected {{# } }} >{{ item[d.options.filed.regionName] }}</option>',         '{{# }) }}'         ].join("");   //構造器 var Class = function(options){ var that = this;   that.index = ++citySelect.index;   that.config = $.extend(true,{}, that.config, citySelect.config, options);   that.render(); };  //核心入口 citySelect.render = function(options){   var inst = new Class(options);   return thisSelect.call(inst); };  //獲取選中值 citySelect.values = function(id){ return citySelect.cache[id]["values"]; //返回緩存中的選中值  };  //設置禁用/啟用  citySelect.disabled = function(id,flag){   $("."+id+"_selectCity").attr("disabled",flag);  };  //重載  thisSelect.config = {};  citySelect.reload = function(id,options){   var config = thisSelect.config[id];    if(!config) return hint.error('The ID option was not found in the citySelect instance');    return citySelect.render($.extend(true, {}, config, options));  };  //默認配置 Class.prototype.config = { lableName : "行政區域", required : false, //是否必選 search : true,  //是否搜索 msg:null,  //默認附加信息 selectedArr : [], //默認選中數組 disabled:false,  //禁用 默認不禁用 filed:{   area:true,  //默認啟用區   regionId:'regionId', //默認字段id名   regionName:'regionName',//默認字段name名   provinceName: "province", //默認省份名稱  cityName : "city",  //默認城市名稱  areaName : "area",  //默認區縣名稱   },  };  //加載容器 Class.prototype.render = function(){  var that = this;  var options = that.config;   options.elem = $(options.elem);  var othis = options.elem;   if(!options.elem[0]) return that; //如果元素不存在     //請求參數的自定義格式   options.request = $.extend({    //pageName: 'page',    //limitName: 'limit'   }, options.request);      //響應數據的自定義格式   options.response = $.extend({   statusName: 'code',   statusCode: 0,   msgName: 'msg',   dataName: 'data',   }, options.response);    //主容器  var reElem = that.elem = $(laytpl(TPL_MAIN).render({    //VIEW_CLASS: ELEM_VIEW,    data: options,    index: that.index //索引  }));  othis.html(reElem);  //生成主元素  that.pullData();  //渲染初始  that.formFilter();  //監聽選擇   };  //監聽表單 Class.prototype.formFilter = function(){ var that = this; var options = that.config; that.key = options.id || options.index;  //監聽省 form.on('select(province'+that.index+')', function(data){  var cityDom = $("#citySelect_"+ options.filed.cityName + that.index); //市  var areaDom = $("#citySelect_"+ options.filed.areaName + that.index); //區  that.chearDom(cityDom);    //清理市  that.chearDom(areaDom);    //清理區  citySelect.cache[that.key]["values"][0] = data.value; //存入緩存  citySelect.cache[that.key]["values"][1] = "";  //清理市級緩存  citySelect.cache[that.key]["values"][2] = "";  //清理區級緩存  if(data.value!=""){  if(options.data){   that.localData(cityDom, data.value);  //本地渲染市級    }else{   that.ajaxData(cityDom,data.value);   //ajax渲染市  }  } });  //監聽市 form.on('select(city'+that.index+')', function(data){  var areaDom = $("#citySelect_"+ options.filed.areaName + that.index); //區  that.chearDom(areaDom);     //清理區  citySelect.cache[that.key]["values"][1] = data.value;  citySelect.cache[that.key]["values"][2] = "";  if(data.value!=""){  if(options.data){   that.localData(areaDom, data.value);  //本地渲染市級    }else{   that.ajaxData(areaDom,data.value);   //加載區  }  } });  //監聽區 form.on('select(area'+that.index+')', function(data){  citySelect.cache[that.key]["values"][2] = data.value;  console.log("選擇區"); //得到select原始DOM對象 });   };  //渲染數據 Class.prototype.pullData = function(){ var that = this; var options = that.config; var dom = $("#citySelect_"+ options.filed.provinceName + that.index); //默認先渲染省 that.key = options.id || options.index; citySelect.cache[that.key] = {values:["","",""]}; //記錄values緩存標記  if(options.data){  //data存在  that.localData(dom,"000000"); }else if(options.url){ //url存在  that.ajaxData(dom); }  };  //data渲染數據 Class.prototype.localData = function(dom,regionId){  var that = this; var options = that.config; var regs = /^/d{2}0000$/; //驗證省id  var regc = /^/d{4}00$/; //驗證市ID if(regionId=="000000"){  //渲染省級  that.renderData(options.data,dom); }else if(regs.test(regionId)){  //渲染市級  $.each(options.data,function(index,item){  if(regionId==item[options.filed.regionId]){   that.renderData(item.children,dom);  }  }); }else if(regc.test(regionId)){  //渲染區級  var sId = regionId.substr(0, 2)+"0000"; //獲取省級Id  $.each(options.data,function(index,item){  if(sId==item[options.filed.regionId]){   $.each(item.children,function(i,it){   if(regionId==it[options.filed.regionId]){    that.renderData(it.children,dom);   }   });  }  }); } }   //ajax獲取數據 Class.prototype.ajaxData = function(dom,regionId){ var that = this; var options = that.config;   var response = options.response;   var params = {};   params[options.filed.regionId] = regionId==undefined?"000000":regionId;      //先查看緩存有沒有   if(citySelect.cache[that.key][regionId]!=undefined ){    that.renderData(citySelect.cache[that.key][regionId],dom);   }else{   $.ajax({    type: options.method || 'get',    url: options.url,    data: $.extend(params, options.where),    dataType: 'json',    success: function(res){    if(res[response.statusName] != response.statusCode){     that.renderForm();     typeof options.error === 'function' && options.error(res);     return ;    }    var data = res[options.response.dataName] || [];    that.renderData(data,dom);    if(data.length>0){     citySelect.cache[that.key][regionId] = data;  //將已經獲取的數據保存緩存    }    options.time = (new Date().getTime() - that.startTime) + ' ms'; //耗時（接口請求+視圖渲染）    typeof options.done === 'function' && options.done(res);    }   ,error: function(e, m){    that.renderData('<option value="">數據接口請求異常</option>',dom);    typeof options.error === 'function' && options.error(res, e,m);   }   });   }    };  //數據渲染 Class.prototype.renderData = function(data,dom){ var that = this, options = that.config; var selectedArr = options.selectedArr; //獲取默認選中數組  if(typeof data === 'string'){  $(dom).html(data); }else{  //渲染選擇項  $(dom).html( $(laytpl(TPL_OPTION).render({  data: data,  options:options,  index: that.index //索引  })));  that.renderForm('select'); } //設置默認選中 var v = $(dom).val(); if(v!=""&&selectedArr.length>0){  for (var i = 0; i < selectedArr.length; i++) {  if(v == selectedArr[i] && i<3){   citySelect.cache[that.key]["values"][i] = v; //保存到選中緩存   that.config.selectedArr[i] = "";   //清除默認選擇數組   if(i==0){   var dom = $("#citySelect_"+ options.filed.cityName + that.index);   if(options.data){    that.localData(dom, v); //本地渲染市級     }else{    that.ajaxData(dom, v); //ajax渲染市級   }   }else if(i==1&&options.filed.area){   var dom = $("#citySelect_"+ options.filed.areaName + that.index);   if(options.data){    that.localData(dom, v); //本地渲染區級     }else{    that.ajaxData(dom, v); //ajax渲染區級   }   }  }  } } };  //渲染表單 Class.prototype.renderForm = function(type){ form.render(type); };  //清空select Class.prototype.chearDom = function(dom){ var that = this; $(dom).html(''); $(dom).append('<option value="">-- 全部 --</option>'); that.renderForm('select'); };  //暴露模塊 exports(MOD_NAME, citySelect);});