new-ipicker
v4.0.4
Published
无任何依赖的轻量级省市区多级联动组件
Downloads
32
Readme
安装组件
CDN 引入
<!-- unpkg -->
<script src="https://unpkg.com/new-ipicker"></script>
<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/new-ipicker"></script>NPM 安装
npm i new-ipicker -S
const iPicker = require( "new-ipicker" );示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iPicker 示例代码</title>
</head>
<body>
<div id="target"></div>
<script src="ipicker.min.js"></script>
<script>
iPicker.create("#target", {
data: {
// 此处以通过 jquery 库获取本地数据源为例
source: $.getJSON( "area.json" )
}
})
</script>
</body>
</html>使用方法
<div id="target"></div>
<script>
iPicker.create("#target", {
// 此处以通过 jquery 库获取本地数据源为例
// 使用内置数据源时，必须保证 source 属性值是标准的 Promise 对象或者是 jquery 提供的 Deferred 对象
// iPicker 会自动调用 then 方法，同时要确保 then 方法的参数就是返回的数据（Object 类型）
data: {
source: $.getJSON( "area.json" )
}
});
</script><div id="target"></div>
<script>
iPicker.create("#target", {
data: {
// 此处以通过 jquery 库获取数据为例
// 示例代码中使用的 "http://www.abcddcba.com/api/area" 是模拟地址，实际应用中替换成真实地址即可
// code 参数值就是相应地区对应的行政区划代码
// ----------------------------------------------------------------------------------------------------------
// 使用自定义数据源时，必须保证 source 属性值是 Function 类型
// iPicker 会自动执行此函数，同时要确保此函数的执行结果返回的是标准的 Promise 对象或者是 jquery 提供的 Deferred 对象
// iPicker 会自动调用 then 方法，同时要确保 then 方法的参数就是返回的数据（Array 类型）
// ----------------------------------------------------------------------------------------------------------
// 初始状态下，iPicker 会自动执行一次 source 函数来获取 “省份” 数据，此时传入的 code 参数值为 null
// 因此，开发者可能需要给 code 参数设置一个默认值来获取 “省份” 数据（如示例代码中 code 为 null 时默认取零）
source: code => $.get( "http://www.abcddcba.com/api/area/areaId=" + ( code || 0 ) )
}
});
</script>
<!-- 上面的示例代码使用了一个统一的地址返回数据 -->
<!-- 也可以传入第二个参数，根据此参数可分别设置 “省市区” 不同的数据源 -->
<script>
iPicker.create("#target", {
data: {
source: function ( code, level ) {
var data = "";
// level 表示层级（范围 1-3 代表：省-市-区）
switch ( level ) {
// 省数据源
// 初始状态下，iPicker 会自动执行一次 source 函数来获取 “省份” 数据，此时传入的 code 参数值为 null
// 因此，开发者可能需要给 code 参数设置一个默认值来获取 “省份” 数据（如示例代码中 areaId=0）
case 1: data = $.get( "http://www.abcddcba.com/api/province/areaId=0" ); break;
// 市数据源
case 2: data = $.get( "http://www.abcddcba.com/api/city/areaId=" + code ); break;
// 区数据源
case 3: data = $.get( "http://www.abcddcba.com/api/district/areaId=" + code ); break;
}
return data;
}
}
});
</script>
<!--
- iPicker 默认会调用返回数据中 code 和 name 属性，例如：
[{
code: "110000",
name: "北京市"
}]
- 可以通过设置 props 来自定义属性名
-->
<script>
iPicker.create("#target", {
data: {
props: {
code: "areaId",
name: "areaName"
},
source: code => $.get( "http://www.abcddcba.com/api/area/areaId=" + ( code || 0 ) )
}
});
</script>// select 模式
iPicker.create("#target", {
data: {
source: $.getJSON( "area.json" )
},
theme: "select"
});
// cascader 模式
iPicker.create("#target", {
data: {
source: $.getJSON( "area.json" )
},
theme: "cascader"
});
// panel 模式
iPicker.create("#target", {
data: {
source: $.getJSON( "area.json" )
},
theme: "panel"
});iPicker.create("#target", {
data: {
source: $.getJSON( "area.json" )
},
selected: [ "230000", "230100", "230103" ],
selectedCallback: () => console.log( "默认值设置成功" )
});iPicker.create("#target", {
data: {
source: $.getJSON( "area.json" )
},
onSelect: ( code, name, all ) => {
// 返回参数均为数组形式
console.log( code );
console.log( name );
console.log( all );
}
});iPicker.create("#target", {
data: {
source: $.getJSON( "area.json" )
},
level: 2
});// 禁用全部层级
iPicker.create("#target", {
data: {
source: $.getJSON( "area.json" )
},
disabled: true
});
// 禁用指定层级，仅限 select 主题模式下
iPicker.create("#target", {
data: {
source: $.getJSON( "area.json" )
},
disabled: [ 2, 3 ]
});// 禁用全部地区
iPicker.create("#target", {
data: {
source: $.getJSON( "area.json" )
},
disabledItem: true
});
// 禁用指定地区
iPicker.create("#target", {
data: {
source: $.getJSON( "area.json" )
},
disabledItem: [ "230000", "230100", "230103" ]
});iPicker 提供了 10 个方法：
// 创建组件
const picker = iPicker.create( "#target", { ... } );
// 创建组件（简写）
const picker = iPicker( "#target", { ... } );
// 设置选中项
iPicker.set( picker, [ "230000", "230100", "230103" ] );
// 获取选中项（前两种等效）
iPicker.get( picker );
iPicker.get( picker, "code" );
iPicker.get( picker, "name" );
iPicker.get( picker, "all" );
// 清空选中项
iPicker.clear( picker );
// 重置（恢复初始状态）
iPicker.reset( picker );
// 销毁组件
iPicker.destroy( picker );
// 启用所有层级
iPicker.enabled( picker, true );
// 启用指定层级，范围：1 - 3，仅限 select 主题模式下
iPicker.enabled( picker, [ 2, 3 ] );
iPicker.enabled( picker, 3 );
// 禁用所有层级
iPicker.disabled( picker, true );
// 禁用指定层级，范围：1 - 3，仅限 select 主题模式下
iPicker.disabled( picker, [ 2, 3 ] );
iPicker.disabled( picker, 3 );
// 启用地区
iPicker.enabledItem( picker, true );
// 启用指定地区
iPicker.enabledItem( picker, [ "230000" ] );
// 禁用所有地区
iPicker.disabledItem( picker, true );
// 禁用指定地区
iPicker.disabledItem( picker, [ "230000" ] );| Chrome | Firefox | Opera | Edge | Safari | IE | | --- | --- | --- | --- | --- | --- | | 60+ | 60+ | 60+ | 17+ | 12+ | 不支持 |