开发小程序有什么好处_layui自界说插件citySelect完

摘要: layui自定软件citySelect完成省份区三联级动挑选 本文关键为大伙儿详尽详细介绍了layui自定软件citySelect完成省份区三联级动挑选,具备一定的参照使用价值,很感兴趣的小伙子伴们...

layui自定义插件citySelect实现省市区三级联动选择       这篇文章主要为大家详细介绍了layui自定义插件citySelect实现省市区三级联动选择,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了layui实现省市区三级联动选择的具体代码,供大家参考,具体内容如下

 * @ 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 amp; amp; (thisSelect.config[id] = options);
 return {
 reload: function(options){
 that.reload.call(that, options);
 config: options
 //字符常量
 var MOD_NAME = 'citySelect';
 //主模板
 var TPL_MAIN = [' div ',
 ' label {{ d.data.lableName }} /label ',
 ' div ',
 ' select name="{{ d.data.filed.provinceName }}" 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 ',
 ' select name="{{ d.data.filed.cityName }}" 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 ',
 ' select name="{{ d.data.filed.areaName }}" 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 {{ d.data.msg }} /div ',
 '{{# } }}',
 ' /div '
 ].join("");
 //选项模板
 var TPL_OPTION = [
 ' option value="" -- 全部 -- /option ',
 '{{# layui.each(d.data,function(index,item){ }}',
 ' option value="{{ item[d.options.filed.regionId] }}" {{#if(d.options.selectedArr.length 0 amp; amp; ($.inArray(item[d.options.filed.regionId], d.options.selectedArr)!=-1)){ }} selected {{# } }} {{ item[d.options.filed.regionName] }} /option ',
 '{{# }) }}'
 ].join("");

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 //索引 })); (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);
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' amp; amp; 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' amp; amp; options.done(res); ,error: function(e, m){ that.renderData(' option value="" 数据接口请求异常 /option ',dom); typeof options.error === 'function' amp; amp; 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'){ $((data); }else{ //渲染选择项 $(( $(laytpl(TPL_OPTION).render({ data: data, options:options, index: that.index //索引 }))); that.renderForm('select'); //设置默认选中 var v = $(dom).val(); if(v!="" amp; amp;selectedArr.length 0){ for (var i = 0; i selectedArr.length; i++) { if(v == selectedArr[i] amp; amp; 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 amp; amp;options.filed.area){ var dom = $("#citySelect_"+ options.filed.areaName + that.index); if(options.data){ that.localData(dom, v); //本地渲染区级 }else{ that.ajaxData(dom, v); //ajax渲染区级


联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:网站免费建站