New-ipicker NPM

安装组件

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" ] );