jQuery地址選擇器,可配置顯示15級(原創)

所屬分類:輸入-選擇框

 1102  11  查看評論 (0)
分享到微信朋友圈
X
jQuery地址選擇器,可配置顯示15級(原創) ie兼容9

發布時間:2019-06-27 23:14:42

一個jquery地址選擇器,使用很簡單,使用過程中有任何建議和疑問請聯系作者QQ604712572

1、文件目錄結構如下

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文件

<script src="http://www.lyrgog.live/jquery/jquery-1.10.2.js"></script>
<script src="<%=basePath%>address-picker/js/address-picker.js" type="text/javascript"></script>

4、想讓彈出地址面板展示在哪個頁面元素下,就傳入該元素的id,可以是任意元素(比如div/span/button...之類的)

以一個span舉例:

<span id="address_picker_text">選擇地址</span>

5、快速使用

var addressPicker1 = new addressPicker("address_picker_text");//默認展示三級聯動

6、自定義參數

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 示例代碼:

function fnTest() {
    alert("按鈕2點擊事件");
}
var btnConfig = [{
        text: '清除數據',
        click: function() {
            address_picker.clearSelectedData();
            $("#address_picker_text").text("選擇地區");
        }
    },
    {
        text: '按鈕2',
        click: fnTest
    }
];
相關插件-選擇框

jQuery簡單的列表選擇器

使用jQuery插件實現左右列表項的選擇功能
  選擇框
 20937  175

仿去哪兒網城市選擇

旅游網站可借鑒
  選擇框
 25799  127
  選擇框
 30607  238

CheckBox展現不同的狀態(原創)

類似qq郵箱選中展現不同的狀態,常用功能,簡單實用。
  選擇框
 10717  71

討論這個項目(0)回答他人問題或分享插件使用方法獎勵jQ幣

取消回復
  短信接口
河北时时彩投注站