weui.js中的picker自定义实现移动端三级联动、多级联动（省市区联动）

最新推荐文章于 2024-04-25 09:38:21 发布

苦不苦

最新推荐文章于 2024-04-25 09:38:21 发布

阅读量1.2w

点赞数 2

文章标签： weui picker 三级联动省市区多级联动

本文链接：https://blog.csdn.net/mofeimo110/article/details/85604043

版权

weui中的picker默认组件只有两个，一个默认的picker，只有一级可选项，一个datePicker可以实现年月日联动，但是好多自定义场景需要自定义多级联动。

如时间2019-01-01 12:00:00这种N级联动或者省市区三级联动。

此处以省市区三级联动为例。

html代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>无标题文档</title>\
        <link rel="stylesheet" href="js/weui/weui.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/weui/weui.js"></script>
        <script>
            $(function() {
                function setCities() {
                    //此处手写几个层级关联关系数据源，具体的数据源根据开发环境指定
                    var provinces = [{
                        INDEXS: "010",
                        NAME: "北京",
                        PARENTID: "CN"
                    }, {
                        INDEXS: "120",
                        NAME: "山东",
                        PARENTID: "CN"
                    }];
                    var cities = [{
                            INDEXS: "120183",
                            NAME: "东营市",
                            PARENTID: "120"
                        }, {
                            INDEXS: "120179",
                            NAME: "济南市",
                            PARENTID: "120"
                        },
                        {
                            INDEXS: "01043",
                            NAME: "北京市",
                            PARENTID: "010"
                        }
                    ];
                    var districts = [{
                            INDEXS: "010415",
                            NAME: "朝阳区",
                            PARENTID: "01043"
                        }, {
                            INDEXS: "010423",
                            NAME: "昌平区",
                            PARENTID: "01043"
                        },
                        {
                            INDEXS: "1201657",
                            NAME: "东营区东城",
                            PARENTID: "120183"
                        }, {
                            INDEXS: "1000380",
                            NAME: "东营区西城",
                            PARENTID: "120183"
                        },
                        {
                            INDEXS: "1201625",
                            NAME: "槐荫区",
                            PARENTID: "120179"
                        }, {
                            INDEXS: "1201627",
                            NAME: "历城区",
                            PARENTID: "120179"
                        }
                    ];

                    //根据数据源进行数据关联绑定
                    city_selects = [];
                    $.each(provinces, function(i) {
                        var level1 = {
                            label: provinces[i].NAME,
                            value: provinces[i].INDEXS,
                            children: []
                        };
                        $.each(cities, function(j) {
                            if(provinces[i].INDEXS == cities[j].PARENTID) {
                                var level2 = {
                                    label: cities[j].NAME,
                                    value: cities[j].INDEXS,
                                    children: []
                                };
                                $.each(districts, function(x) {
                                    if(cities[j].INDEXS == districts[x].PARENTID) {
                                        var level3 = {
                                            label: districts[x].NAME,
                                            value: districts[x].INDEXS
                                        };
                                        level2.children.push(level3);
                                    }
                                });
                                level1.children.push(level2);
                            }
                        });
                        city_selects.push(level1);
                    });
                    return city_selects;
                }
                $('#test').on('click', function() {
                    weui.picker(setCities(), {
                        //此处编写各种属性和事件
                        onConfirm: function(result) {
                            console.log(result);
                        }
                    });
                });
            });
        </script>
    </head>

    <body>
        <input type="text" id="test"/>
    </body>

</html>

picker的数据源的结构大概就是有子选项时为{label:"显示值",value:"编号或索引之类",children:[此处为数组，内含子对象，数据格式跟本格式一致，无子选项时children可不存在]}；

如果需要更灵活的自定义方式，可以参考weui.js中的datepicker方法，观察官方是如何进行封装的：

function datePicker(options) {
        var defaults = _util2.default.extend({
            id: 'datePicker',
            onChange: _util2.default.noop,
            onConfirm: _util2.default.noop,
            start: 2000,
            end: 2030,
            cron: '* * *'
        }, options);

        // 兼容原来的 start、end 传 Number 的用法
        if (typeof defaults.start === 'number') {
            defaults.start = new Date(defaults.start + '/01/01');
        } else if (typeof defaults.start === 'string') {
            defaults.start = new Date(defaults.start.replace(/-/g, '/'));
        }
        if (typeof defaults.end === 'number') {
            defaults.end = new Date(defaults.end + '/12/31');
        } else if (typeof defaults.end === 'string') {
            defaults.end = new Date(defaults.end.replace(/-/g, '/'));
        }

        var findBy = function findBy(array, key, value) {
            for (var i = 0, len = array.length; i < len; i++) {
                var _obj = array[i];
                if (_obj[key] == value) {
                    return _obj;
                }
            }
        };

        var date = [];
        var interval = _cron2.default.parse(defaults.cron, defaults.start, defaults.end);
        var obj = void 0;
        do {
            obj = interval.next();

            var year = obj.value.getFullYear();
            var month = obj.value.getMonth() + 1;
            var day = obj.value.getDate();

            var Y = findBy(date, 'value', year);
            if (!Y) {
                Y = {
                    label: year + '年',
                    value: year,
                    children: []
                };
                date.push(Y);
            }
            var M = findBy(Y.children, 'value', month);
            if (!M) {
                M = {
                    label: month + '月',
                    value: month,
                    children: []
                };
                Y.children.push(M);
            }
            M.children.push({
                label: day + '日',
                value: day
            });
        } while (!obj.done);

        return picker(date, defaults);
    }

苦不苦

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
4
评论
weui.js中的picker自定义实现移动端三级联动、多级联动（省市区联动）

weui中的picker默认组件只有两个，一个默认的picker，只有一级可选项，一个datePicker可以实现年月日联动，但是好多自定义场景需要自定义多级联动。如时间2019-01-01 12:00:00这种N级联动或者省市区三级联动。此处以省市区三级联动为例。html代码：<!DOCTYPE html><html> <head&gt...
复制链接

扫一扫