php 實現城市選擇器 h5城市選擇器

我本是產品經理一枚，但酷愛寫代碼，自己經常也做些項目。同事也發現博客園特別給力，好多不明白的都在博客園上找到了答案，所以我們也寫一篇文章回饋一下，寫得好也理解一下

 

根據數據庫數據生成html，項目中需求，需要生成html格式的城市選擇器。城市在數據庫中。

需要生成如下格式，有字母分組，有漢字全拼，漢字名稱

 

最終展示效果：

 

 

下面是實現過程：

1.借助漢字轉拼音的開源庫，pinyin.php    項目地址：https://gitee.com/cik/pinyin_php     

2.其他就是自己碼代碼了

 

<?php
require 'pinyin.php';
try {
    $db = new PDO('mysql:host=127.0.0.1;dbname=wzcms', 'root', '404230497');
    //查詢
    $rows = $db->query('SELECT * from baidu_city')->fetchAll(PDO::FETCH_ASSOC);
    $rs = array();
    foreach ($rows as $row) {
        $rs[] = $row;
    }
    $db = null;
} catch (PDOException $e) {
    print "Error!: " . $e->getMessage() . "<br/>";
    die;
}
$html = '';
foreach ($rs as $a => $kv) {
    $name = $kv['city_name'];
    //獲得城市名稱
    $pyall = str_replace(" ", "", ucwords(pinyin($name)));
    //獲得城市名稱的拼音，在用ucwords()  把拼音首字母轉為大寫
    $one = strtoupper(pinyin($name, $ret_format = 'first'));
    //獲得漢字拼音首字母
    $html[$a]['one'] = strtoupper(pinyin($name, $ret_format = 'one'));
    //獲得整個詞的第一個字母  方便后面分組
    $html[$a]['first'] = $one;
    $html[$a]['html'] = '    <li data-value="' . $one . '" data-tags="' . $pyall . '" class="mui-table-view-cell mui-indexed-list-item">' . $name . '</li>';
    //需要生成的html
}
array_multisort(array_column($html, 'one'), SORT_ASC, $html);
//對數組排序  ，按整個詞的首字母排序
$list = array_group_by($html, $key = 'one');
//用到數據按鍵值分組
foreach (array_group_by($html, $key = 'one') as $a => $kv) {
    echo '<a>' . $a . '</a>';
    //輸出顯示時左側的快速選擇器
    #echo '<li data-group="'.$a.'" class="mui-table-view-divider mui-indexed-list-group">'.$a.'</li>';    echo "\r\n";    //輸出 分組名稱
    foreach ($kv as $kv2) {
        //echo $kv2['html'];// 輸出需要的html
        //echo "\r\n";
    }
}
/*
數據按鍵值分組
$arr  傳入數組
$key  需分組的鍵值
調用方法  array_group_by($html, $key='one');
*/
function array_group_by($arr, $key)
{
    $grouped = [];
    foreach ($arr as $value) {
        $grouped[$value[$key]][] = $value;
    }
    if (func_num_args() > 2) {
        $args = func_get_args();
        foreach ($grouped as $key => $value) {
            $parms = array_merge([$value], array_slice($args, 2, func_num_args()));
            $grouped[$key] = call_user_func_array('array_group_by', $parms);
        }
    }
    return $grouped;
}

 

1、中途還查了一下資料，找到這位博主提供的一個分組方法：http://www.cnblogs.com/bluebirds/p/6149029.html

2、展示的效果是mui-master中，效果所用。

demo

https://files.cnblogs.com/files/yipiantian/mui-master.zip
https://files.cnblogs.com/files/yipiantian/demo.zip