学习《layui从鱼到渔》———编写一个省市区三级联动下拉选择模块

分享 已结 精帖 40 12831
AggerChen
AggerChen 2017-12-17
悬赏:20飞吻
以前一直用layui,有时候也会在社区回答回答问题,然后改改贤心的源码,实现自己更多的功能。但是呢,一直没有勇气说去写一个模块来用,一是本人只是个java后台开发,对前端了解不深,二是不知道如何下手。正好看到贤心出的教程《layui从鱼到渔》,说实话我很兴奋,比 layui 版本更新还要高兴,既能使用到layui的东西,还能跟贤心学习怎么编写,何乐而不为呢,[哈哈] 正好项目到这个地方需要省市区联动的下拉选择,我也看过社区很多朋友分享的代码,但是这次终于轮到我自己来实现了。真的是感慨万分,我是仿照table的写法写的,所以里面的有些思想虽然实现了,但是懂的还不够透彻,所以,期待贤心的下次《layui从鱼到渔》的更新了。。

再来说说本插件,仿照table编写,可以url访问后台,可以data配置本地数据。url访问数据后具有缓存功能,下次同样的地区不会再次访问url。具有重载插件方法和获取插件选择的值方法。能够设置初始值。看看效果吧



1.使用方式

html:
<div id="selectId" class="layui-form-item"></div>
//只需要设置一个id就行了
js:

layui.use('citySelect', function() { //与引用其他原始模块一样,引入citySelect模块
var $ = layui.jquery,
citySelect = layui.citySelect;

//初始化
citySelect.render({
id:'addRegion',
elem: '#selectId',
url:"<%=basePath%>/userInfo/queryRegionList.ft",
//data:[ ], //设置本地数据渲染
method:'post',
//lableName:'行政区域', //自定义表单名称 默认:'行政区域'
//search:false, //是否开启输入查询 默认:true
//required:true, //是否必选 默认:false
msg:'[药店]角色根据所选择连锁决定', //模块下的提示信息 默认:null
selectedArr:regionArr, //默认选中数组 默认:[]
where:{},
response: {
statusName: 'resultCode',
statusCode: 0,
msgName: 'msg',
dataName: 'result'
},
filed:{
area:true, //是否启用区
regionId:'regionId',
regionName:'regionName',
//provinceName: "province", //默认省份名称
//cityName : "city", //默认城市名称
//areaName : "area", //默认区县名称
},
done:function(res){
//成功回调函数
},
error:function(res,e,m){
//失败回调函数
}
});
});
2.配置清单


3.方法
禁用启用:citySelect.disabled("addRegion",true);  //参数一位配置的id 参数二表示禁用还是启用

重载:citySelect.reload("addRegion",{ //参数一位插件配置的id,参数二可以为配置参数的所有字段
selectedArr:[],
disabled:true
});

获取所选值:citySelect.values("addRegion"); //参数为插件配置的id,返回值为数组,分别为省市区的选择值,未选择为空

4.注意:

  • 当配置项配置了data本地数据后,url参数就失效了,而加载本地数据。本地数据格式已在下方,需要的可以去下载。
  • 当选择了上级区域,url参数会去查询他的下级区域,所以后台查询省市区的url只能是一个,这个需要后台接口配合了
  • url查询了一个区域后,会自动保存到本地缓存,所以下次再选择同一个区域就不会去后台查询了。例如选择了北京,则url返回北京下级区域后保存到缓存,然后选择四川,再切回北京,则直接从缓存取出数据,而不会重新后台查询。
  • 自己第一次写的插件,可能存在bug和不完美,希望大家多多提出意见和建议,让我们共同进步。
  • citySelect.js代码 码云地址: https://gitee.com/Agger/codes/ednq2b367g4fu8rk5tosy20#0-sqq-1-34633-9737f6f9e09dfaf5d3fd14d775bfee85
  • 本地全国行政区域json地址, https://gitee.com/Agger/codes/f0hz1nsxeav629ckiowu323
回帖
本帖已设置禁止回复