city-picker城市选择器调整使用后台动态城市数据

city-picker.js 城市选择器默认情况下使用的是本地文件 city-picker.data.js 内的城市数据对于维护个管理不太友好下面我们通过调整代码来实现渲染动态后台城市数据。

city-picker.data.js

(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as anonymous module.
        define('ChineseDistricts', [], factory);
    } else {
        // Browser globals.
        factory();
    }
})(function () {

        var ChineseDistricts={};

    $.ajax({
        async: false,
        url: 'ajax/cityPickerData',
        success: function (result) {
            ChineseDistricts = result;
        },
    });

    if (typeof window !== 'undefined') {
        window.ChineseDistricts = ChineseDistricts;
    }

    return ChineseDistricts;

});

后端接口返回

    public function cityPickerData()
    {
        return CacheTool::instance()->superCache("city:picker:data", function (SuperCacheEntity $cacheEntity) {
            $areaModel = new Area();
            $list      = $areaModel->column('id,pid,name,level,first');

            $chinese_districts = [];
            foreach ($list as $v) {
                $chinese_districts[86] = $chinese_districts[86] ?? [];
                if ($v['level'] === 1) {
                    switch (true) {
                        case preg_match('/^[A-G]+$/', $v['first']):
                            $chinese_districts[86]["A-G"][] = ["code" => $v['id'], "address" => $v['name']];
                            break;
                        case preg_match('/^[H-K]+$/', $v['first']):
                            $chinese_districts[86]["H-K"][] = ["code" => $v['id'], "address" => $v['name']];
                            break;
                        case preg_match('/^[L-S]+$/', $v['first']):
                            $chinese_districts[86]["L-S"][] = ["code" => $v['id'], "address" => $v['name']];
                            break;
                        case preg_match('/^[T-Z]+$/', $v['first']):
                            $chinese_districts[86]["T-Z"][] = ["code" => $v['id'], "address" => $v['name']];
                            break;
                        default:
                            $chinese_districts[86]["-"][] = ["code" => $v['id'], "address" => $v['name']];
                    }
                }

                if ($v['level'] >= 2) {
                    $chinese_districts[$v['pid']]           = $chinese_districts[$v['pid']] ?? [];
                    $chinese_districts[$v['pid']][$v['id']] = $v['name'];
                }
            }
            $cacheEntity->setData($chinese_districts);
        }, Date::MINUTE);
    }

最终实现效果