当前位置:首页 > Layui组件扩展 > 正文内容

地区选择组件 layui-areaSelect

summerbloom3周前 (05-01)Layui组件扩展502

layui-areaSelect

介绍

基于layui扩展的省市区县选择组件,支持如下特性:
1、指定层级选择,可指定到省份、城市、区县选择,默认省份选择;
2、支持编辑回显,可指定已选数据,组件展示时将自动勾选;
3、支持排除选择,可指定哪些区域作为排除选择,组件展示时将隐藏这些区域;
4、多级联动机制,选中层级区域节点将自动映射对应父节点、子节点,并动态展示选中区域数量;
5、精简选中返回结果,只返回必要的区域编码;

该组件非常适合用于区域多选业务开发,比如运费模板中指定区域等类似业务,需要支持回显、排除其他已选等特性要求;

在线示例

请查看:https://zhou-wannian.gitee.io/layui-areaselect/


预览图:

image.png

软件架构

1、组件目前使用json数据作为区域展示依据,可替换为后台接口数据,需要注意的适配数据格式,亦可改造源码适配当前项目区域格式;
2、考虑到区域本身可抽象为树形节点的结构,代码整体按照树状模型映射视图更新的模式来设计,核心采用数据驱动view的思路;
3、当前项目基于layui封装,使用了layui中的jquery插件,但主体还是采用了js dom本身的api开发为主;
4、本人本职工作是java后端开发,故该组件代码水平不能保证,能用级别而已,前端大神如有建议请及时指点一二,不胜感激;
5、后续会完善更多版本出来,比如不依赖其他框架的版本、vue版本;

安装教程

1、vscode导入本项目,live server直接运行index.html即可看到效果;
2、当前版本使用layui,如果前端项目本身是layui,那么直接集成即可,本身项目就是按照这样的例子来写的;其他类型项目也可加以改造使用;

使用说明

详见index.js,引入插件后,调用select方法传参即可,相关参数的含义和格式参考area.js和index.js;如有使用问题欢迎留言评论或发邮件;


下载地址:

https://gitee.com/zhou-wannian/layui-areaSelect.git

扫描二维码推送至手机访问。

版权声明:本文由Layui中文网博客发布,如需转载请注明出处。

本文链接:http://blog.layui.org.cn/post/10.html

分享给朋友:

“地区选择组件 layui-areaSelect” 的相关文章

证件照扩展 layui-exts-idcard-upload

证件照扩展 layui-exts-idcard-upload

介绍实名认证页面的实现,适用于证件照认证等页面。效果预览图下载地址:https://gitee.com/layui-exts/id-card-upload...

消息通知扩展notify

消息通知扩展notify

功能:layui消息通知插件 6种样式,可手动关闭层,支持回调方法,可设置弹出位置,兼容主流浏览器,兼容至ie9  下载地址:  https://gitee.com/u33/notify.git...

按回车键(Enter)生成标签扩展-InputTag

按回车键(Enter)生成标签扩展-InputTag

简介InputTag 组件。按回车键(Enter)生成标签!按回退键(Backspace)删除标签!预览下载地址:https://gitee.com/cshaptx4869/input-tag.git...

图标选择扩展 layui-exts-icon-selected

图标选择扩展 layui-exts-icon-selected

名称:layui图标选择扩展 layui-exts-icon-selected功能介绍:基于 layui 扩展的图标选择器扩展, 常见的使用场景如管理后台"角色权限菜单"管理中, 给菜单分配图标的能力, 结合同样还是我编写的 numberInput 扩展, 你...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。