更新时间：2019-11-20 00:21:24
更新说明：
1、修复bug-第5级点完之后选择面板没有自动消失bug
2、修复bug-连续选择后切换到第一层重新选择，后续的数据和高度没有重置。
发布时间：2019-06-27 23:14:42
一个jquery地址选择器，使用很简单，使用过程中有任何建议和疑问请联系作者QQ604712572
1、文件目录结构如下：
1 2 3 4 5 6 7 8 9 | dist/├── js ├── address-picker.js (compressed)├── css ├── address-picker.css (compressed)└── data ├── pc-code.json (省市两级json数据) ├── pca-code.json (省市区三级json数据，默认使用这个) └── pcas-code.json (省市区乡镇四级json数据) |
2、将dist文件夹下的三个文件夹放进项目（注意不要改变css或js文件的相对位置）
3、在html中引入js文件
1 2 | <script src="<%=basePath%>address-picker/js/address-picker.js" type="text/javascript"></script> |
4、想让弹出地址面板展示在哪个页面元素下，就传入该元素的id，可以是任意元素(比如div/span/button...之类的)
以一个span举例：
1 | <span id="address_picker_text">选择地址</span> |
5、快速使用
1 | var addressPicker1 = new addressPicker("address_picker_text");//默认展示三级联动 |
6、自定义参数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | var addressPicker1 = new addressPicker({ id: "address_picker_text", //想要展示在哪个页面元素下 level: 3, //设置几级联动，默认3，可支持1-5 levelDesc: ["省份", "城市", "区县", "乡镇", "社区"], //每级联动标题展示文字,默认如左显示 index: "996", //浮动面板的z-index，默认`996` separator: " / ", //选择后返回的文字值分隔符，例如`四川省 / 成都市 / 武侯区`,默认` / ` isInitClick: true, //是否为元素id自动绑定点击事件,默认`true` isWithMouse: false, //浮动面板是否跟随鼠标点击时坐标展示(而不是根据元素id的坐标).默认`false` offsetX: 0, //浮动面板x坐标偏移量，默认`0` offsetY: 0, //浮动面板y坐标偏移量,默认`0` emptyText: "暂无数据", //数据为空时展示文字,默认'暂无数据' color: "#56b4f8", //主题颜色，默认#56b4f8 fontSize: '14px', //字体大小，默认14px isAsync: false, //是否异步加载数据，默认false，如果设置true的话asyncUrl必传 asyncUrl: "", //异步加载url，data数据将无效 btnConfig: [], //面板下方展示的自定义按钮组，格式见后面说明。默认不传 data: "" //┌──未指定isAsync的时候以data为准，一次性加载所有数据 //├──可不传,默认使用`data`文件夹下的三级数据json文件}); //└──支持传入json文件路径(数据类型为string)或是数据本身(数据类型为object) |
7、事件方法
show()显示面板
hide()隐藏面板
refreshData(data) 重新载入地址data
on(type,function) 绑定地址选择面板事件
getCurrentObject() 获取当前点击节点数据
getTotalValueAsText() 获取所有选择节点的文本字符串
getTotalValueAsArray() 获取所有选择节点的数组结构
clearSelectedData() 清除所有选中值
setSelectedData(arr) 设置选中值
8、config详解
8.1 初始化data数据格式
8.1.1 为空或不传，默认使用本插件自带的data文件夹下的json数据(来源于民政部和国家统计局公开的全国地址数据)
8.1.2 字符串，自己项目的json文件路径，格式要求参考data文件夹下的json文件
8.1.3 object，要有name、code、children三个节点，形如[{name:'',code:'',children:[{name:'',code:''}]}]
8.2 asyncUrl返回数据格式
8.2.1 当isAsync为true且asyncUrl不为空时，切换为异步模式
8.2.2 初始化(new addressPicker)的时候会发起第一层数据的请求，以后点击每层里面的数据会发起下一层的请求
8.2.3 请求数据格式示例{"code":"11", "name":"北京市", "level":1},第一次请求的时候code和name为空
8.2.4 返回下一层数据的格式示例{code:"1101",name:"市辖区"}
8.3 按钮组btnConfig数据格式
8.3.1 可不传，默认无按钮
8.3.2 传参格式[{text:'按钮名称',click:按钮点击事件function}]，最多传3个按钮
8.3.3 示例代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function fnTest() { alert("按钮2点击事件");}var btnConfig = [{ text: '清除数据', click: function() { address_picker.clearSelectedData(); $("#address_picker_text").text("选择地区"); } }, { text: '按钮2', click: fnTest }]; |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery前端table插件锁定表头和锁定首列
- 下一个特效： jQuery带炫酷轮播图效果的Lightbox弹出层插件