layui自定义插件citySelect实现省市区三级联动选择
本文实例为大家分享了layui实现省市区三级联动选择的具体代码,供大家参考,具体内容如下
省市区三级菜单联动插件
/** *@name:citySelect省市区三级选择模块 *@Author:aggerChen *@version:1.0 */ layui.define(['layer','form','element','laytpl'],function(exports){ var$=layui.$; varform=layui.form; varlaytpl=layui.laytpl; varelement=layui.emelemt; //外部接口 varcitySelect={ config:{}//全局配置项 ,cache:{}//数据缓存 ,index:layui.laypage?(layui.laypage.index+10000):0 }; //操作当前实例 varthisSelect=function(){ varthat=this, options=that.config, id=options.id; id&&(thisSelect.config[id]=options); return{ reload:function(options){ that.reload.call(that,options); }, config:options } }; //字符常量 varMOD_NAME='citySelect'; //主模板 varTPL_MAIN=['<divclass="layui-form-item">', '<labelclass="layui-form-label">{{d.data.lableName}}</label>', '<divclass="layui-input-inline"style="width:160px">', '<selectname="{{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{{#}}}>', '<optionvalue="000000">--全部--</option>', '</select>', '</div>', '<divclass="layui-input-inline"style="width:161px">', '<selectname="{{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{{#}}}>', '<optionvalue="">--全部--</option>', '</select>', '</div>', '{{#if(d.data.filed.area){}}', '<divclass="layui-input-inline"style="width:161px">', '<selectname="{{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{{#}}}>', '<optionvalue="">--全部--</option>', '</select>', '</div>', '{{#}}}', '{{#if(d.data.msg){}}', '<divclass="layui-form-midlayui-word-aux">{{d.data.msg}}</div>', '{{#}}}', '</div>' ].join(""); //选项模板 varTPL_OPTION=[ '<optionvalue="">--全部--</option>', '{{#layui.each(d.data,function(index,item){}}', '<optionclass="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(""); //构造器 varClass=function(options){ varthat=this; that.index=++citySelect.index; that.config=$.extend(true,{},that.config,citySelect.config,options); that.render(); }; //核心入口 citySelect.render=function(options){ varinst=newClass(options); returnthisSelect.call(inst); }; //获取选中值 citySelect.values=function(id){ returncitySelect.cache[id]["values"];//返回缓存中的选中值 }; //设置禁用/启用 citySelect.disabled=function(id,flag){ $("."+id+"_selectCity").attr("disabled",flag); }; //重载 thisSelect.config={}; citySelect.reload=function(id,options){ varconfig=thisSelect.config[id]; if(!config)returnhint.error('TheIDoptionwasnotfoundinthecitySelectinstance'); returncitySelect.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(){ varthat=this; varoptions=that.config; options.elem=$(options.elem); varothis=options.elem; if(!options.elem[0])returnthat;//如果元素不存在 //请求参数的自定义格式 options.request=$.extend({ //pageName:'page', //limitName:'limit' },options.request); //响应数据的自定义格式 options.response=$.extend({ statusName:'code', statusCode:0, msgName:'msg', dataName:'data', },options.response); //主容器 varreElem=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(){ varthat=this; varoptions=that.config; that.key=options.id||options.index; //监听省 form.on('select(province'+that.index+')',function(data){ varcityDom=$("#citySelect_"+options.filed.cityName+that.index);//市 varareaDom=$("#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){ varareaDom=$("#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(){ varthat=this; varoptions=that.config; vardom=$("#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"); }elseif(options.url){//url存在 that.ajaxData(dom); } }; //data渲染数据 Class.prototype.localData=function(dom,regionId){ varthat=this; varoptions=that.config; varregs=/^\d{2}0000$/;//验证省id varregc=/^\d{4}00$/;//验证市ID if(regionId=="000000"){ //渲染省级 that.renderData(options.data,dom); }elseif(regs.test(regionId)){ //渲染市级 $.each(options.data,function(index,item){ if(regionId==item[options.filed.regionId]){ that.renderData(item.children,dom); } }); }elseif(regc.test(regionId)){ //渲染区级 varsId=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){ varthat=this; varoptions=that.config; varresponse=options.response; varparams={}; 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(); typeofoptions.error==='function'&&options.error(res); return; } vardata=res[options.response.dataName]||[]; that.renderData(data,dom); if(data.length>0){ citySelect.cache[that.key][regionId]=data;//将已经获取的数据保存缓存 } options.time=(newDate().getTime()-that.startTime)+'ms';//耗时(接口请求+视图渲染) typeofoptions.done==='function'&&options.done(res); } ,error:function(e,m){ that.renderData('<optionvalue="">数据接口请求异常</option>',dom); typeofoptions.error==='function'&&options.error(res,e,m); } }); } }; //数据渲染 Class.prototype.renderData=function(data,dom){ varthat=this, options=that.config; varselectedArr=options.selectedArr;//获取默认选中数组 if(typeofdata==='string'){ $(dom).html(data); }else{ //渲染选择项 $(dom).html($(laytpl(TPL_OPTION).render({ data:data, options:options, index:that.index//索引 }))); that.renderForm('select'); } //设置默认选中 varv=$(dom).val(); if(v!=""&&selectedArr.length>0){ for(vari=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){ vardom=$("#citySelect_"+options.filed.cityName+that.index); if(options.data){ that.localData(dom,v);//本地渲染市级 }else{ that.ajaxData(dom,v);//ajax渲染市级 } }elseif(i==1&&options.filed.area){ vardom=$("#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){ varthat=this; $(dom).html(''); $(dom).append('<optionvalue="">--全部--</option>'); that.renderForm('select'); }; //暴露模块 exports(MOD_NAME,citySelect); });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。