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

分享 已结 精帖
40 7510
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
回帖
  • 金满斗
    2017-12-18
    没搞懂,如果要用本地数据的话,本地数据放在哪里呢?
    1 回复
  • 神羽鸦青
    2017-12-29
    是直接写数组吧?看说明里应该是写数组
    1 回复
  • AggerChen
    2017-12-29
    @神羽鸦青 数组。你恐怕要自己单独引用一下
    1 回复
  • 宽哥
    2017-12-17
    哎呀, 以假乱真了
    0 回复
  • [赞] 先点个赞
    0 回复
  • 这么流弊啊 ,要上天的节奏啊!
    0 回复
  • 猫吃
    2017-12-18
    [太开心]
    0 回复
  • [good]
    0 回复
  • 小野心
    2017-12-18
    厉害[good]
    0 回复
  • 先收藏了再说
    0 回复
  • 只要是分享的,我都点赞
    0 回复
  • 多谢大神分享[赞]
    0 回复
  • 亚马逊
    2017-12-18
    分享下我的之前搞的,无限级
    http://fly.layui.com/jie/14421/
    0 回复
  • 谢贤
    2017-12-18
    @宽哥 哈哈
    0 回复
  • demon998
    2017-12-18
    @亚马 感谢了 [嘻嘻]
    0 回复
  • 亚马逊
    2017-12-18
    @demon998 是在说我么。[可怜]
    0 回复
  • AggerChen
    2017-12-19
    @金满斗 本地数据就是一个js数组变量就行了,然后配置在配置参数 data:[ ]就行了。
    本地数据你可以下载我提供的地址 https://gitee.com/Agger/codes/f0hz1nsxeav629ckiowu323
    0 回复
  • aimon
    2017-12-19
    本地数据用不了
    0 回复
  • aimon
    2017-12-19
    而且样式也没有渲染成layui的样式
    0 回复
  • aimon
    2017-12-19
    [嘻嘻] 可以用了,原来是路径错了,感谢LZ
    0 回复
  • aimon
    2017-12-19
    LZ这个默认选中数组是个什么样的格式啊,设置都无效,感觉用起来好困难啊
    0 回复
  • 雨加雪
    2017-12-19
    1232412424
    0 回复
  • 金满斗
    2017-12-19
    @AggerChen ,首先谢谢你的分享,我觉得这个很好。我准备把它搞成个例子放我博客上。以后需要的时候直接用。
    昨天试验了下,没成功,没有监听事件。这里是我的代码截图。



    里面的treeSelect.js是别人的无极限分类。和这个无关。
    现在的情况是用本地文件省能加载,但不能监听下拉选择事件。后面的当然没反应了。你觉得我这样错在哪里。
    或者你贴下你自己的项目应用网址,我去看看也行
    0 回复
  • 金满斗
    2017-12-19
    @金满斗 ,解决了,原来我没加表单。html里加这个就行了。谢谢分享。
    <form class="layui-form">
    <div id="selectId" class="layui-form-item"></div>
    </form>
    要加form的
    0 回复
  • 金满斗
    2017-12-19
    已经分享到我的博客了,有兴趣的朋友可以去看看。
    http://blog.jvbaopeng.com/blog/149.html
    0 回复
  • [嘻嘻] 好屌~~~~~
    0 回复
  • AggerChen
    2017-12-20
    @aimon 默认选中数组就是字符串啊 比如 ["510000","510100" ,"510101"]
    省市区的regionId都放在一个数组里面,没有先后顺序。我的逻辑是这样的,渲染省的时候去判断有没有默认值,渲染市和区的时候也是一样的逻辑。但是省份的默认regionId只能有一个,多个的话渲染的时候以最后一个省份为准
    0 回复
  • AggerChen
    2017-12-20
    @金满斗 对 因为这个是表单元素,同样用的是表单监听事件,所以要加载表单里面才能实现。[哈哈]
    0 回复
  • demon998
    2017-12-20
    @亚马逊 [嘻嘻] 肯定是啊。[阴险] 我在测试下回复,我删除回复名字部分 是不是回复的已经不是原来的那个人了。
    0 回复
  • 大佬,请问 怎么获取选中的值呢?
    0 回复
本帖已设置禁止回复