layui自定义插件citySelect实现省市区三级联动选择_javascript技巧_脚本之家

/** * @ name : citySelect 省市区三级选择模块 * @ Author: aggerChen * @ version: 1.0 */layui.define(['layer','form','element','laytpl'], function{ 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{ that.reload.call; }, config: options } }; //字符常量 var MOD_NAME = 'citySelect'; //主模板 var TPL_MAIN = ['', '{{ d.data.lableName }}', '', '', '-- 全部 --', '', '', '', '', '-- 全部 --', '', '', '{{# if{ }}', '', '', '-- 全部 --', '', '', '{{# } }}', '{{# if{ }}', '{{ d.data.msg }}', '{{# } }}', '' ].join; //选项模板 var TPL_OPTION = [ '-- 全部 --', '{{# layui.each(d.data,function{ }}', '0 && ($.inArray(item[d.options.filed.regionId], d.options.selectedArr)!=-1)){ }} selected {{# } }} >{{ item[d.options.filed.regionName] }}', '{{# }) }}' ].join; //构造器 var Class = function{ var that = this; that.index = ++citySelect.index; that.config = $.extend(true,{}, that.config, citySelect.config, options); that.render(); }; //核心入口 citySelect.render = function{ var inst = new Class; return thisSelect.call; }; //获取选中值 citySelect.values = function{ return citySelect.cache[id]["values"]; //返回缓存中的选中值 }; //设置禁用/启用 citySelect.disabled = function{ $.attr; }; //重载 thisSelect.config = {}; citySelect.reload = function{ var config = thisSelect.config[id]; if 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 = $; var othis = options.elem; if 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 = $.render({ //VIEW_CLASS: ELEM_VIEW, data: options, index: that.index //索引 })); othis.html; //生成主元素 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{ var cityDom = $("#citySelect_"+ options.filed.cityName + that.index); //市 var areaDom = $("#citySelect_"+ options.filed.areaName + that.index); //区 that.chearDom; //清理市 that.chearDom; //清理区 citySelect.cache[that.key]["values"][0] = data.value; //存入缓存 citySelect.cache[that.key]["values"][1] = ""; //清理市级缓存 citySelect.cache[that.key]["values"][2] = ""; //清理区级缓存 if{ if{ that.localData; //本地渲染市级 }else{ that.ajaxData; //ajax渲染市 } } }); //监听市 form.on('select', function{ var areaDom = $("#citySelect_"+ options.filed.areaName + that.index); //区 that.chearDom; //清理区 citySelect.cache[that.key]["values"][1] = data.value; citySelect.cache[that.key]["values"][2] = ""; if{ if{ that.localData; //本地渲染市级 }else{ that.ajaxData; //加载区 } } }); //监听区 form.on('select', function{ 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{ //data存在 that.localData; }else if{ //url存在 that.ajaxData; } }; //data渲染数据 Class.prototype.localData = function{ var that = this; var options = that.config; var regs = /^d{2}0000$/; //验证省id var regc = /^d{4}00$/; //验证市ID if{ //渲染省级 that.renderData; }else if{ //渲染市级 $.each(options.data,function{ if(regionId==item[options.filed.regionId]){ that.renderData; } }); }else if{ //渲染区级 var sId = regionId.substr+"0000"; //获取省级Id $.each(options.data,function{ if(sId==item[options.filed.regionId]){ $.each(item.children,function{ if(regionId==it[options.filed.regionId]){ that.renderData; } }); } }); } } //ajax获取数据 Class.prototype.ajaxData = function{ 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{ if(res[response.statusName] != response.statusCode){ that.renderForm(); typeof options.error === 'function' && options.error; return ; } var data = res[options.response.dataName] || []; that.renderData; if{ citySelect.cache[that.key][regionId] = data; //将已经获取的数据保存缓存 } options.time =  - that.startTime) + ' ms'; //耗时 typeof options.done === 'function' && options.done; } ,error: function{ that.renderData('数据接口请求异常',dom); typeof options.error === 'function' && options.error; } }; //数据渲染 Class.prototype.renderData = function{ var that = this, options = that.config; var selectedArr = options.selectedArr; //获取默认选中数组 if(typeof data === 'string'){ $; }else{ //渲染选择项 $.html.render({ data: data, options:options, index: that.index //索引 }))); that.renderForm; } //设置默认选中 var v = $; 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{ var dom = $("#citySelect_"+ options.filed.cityName + that.index); if{ that.localData; //本地渲染市级 }else{ that.ajaxData; //ajax渲染市级 } }else if(i==1&&options.filed.area){ var dom = $("#citySelect_"+ options.filed.areaName + that.index); if{ that.localData; //本地渲染区级 }else{ that.ajaxData; //ajax渲染区级 } } } } } }; //渲染表单 Class.prototype.renderForm = function{ form.render; }; //清空select Class.prototype.chearDom = function{ var that = this; $.append('-- 全部 --'); that.renderForm; }; //暴露模块 exports;});

www.6766.com,省市区三级菜单联动插件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

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

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图