php 实现城市选择器 h5城市选择器

我本是产品经理一枚，但酷爱写代码，自己经常也做些项目。同事也发现博客园特别给力，好多不明白的都在博客园上找到了答案，所以我们也写一篇文章回馈一下，写得好也理解一下

 

根据数据库数据生成html，项目中需求，需要生成html格式的城市选择器。城市在数据库中。

需要生成如下格式，有字母分组，有汉字全拼，汉字名称

 

最终展示效果：

 

 

下面是实现过程：

1.借助汉字转拼音的开源库，pinyin.php    项目地址：https://gitee.com/cik/pinyin_php     

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

 

 1 <?php
 2 require 'pinyin.php';
 3 try {
 4     $db = new PDO('mysql:host=127.0.0.1;dbname=wzcms', 'root', '404230497');
 5     //查询
 6     $rows = $db->query('SELECT * from baidu_city')->fetchAll(PDO::FETCH_ASSOC);
 7     $rs = array();
 8     foreach ($rows as $row) {
 9         $rs[] = $row;
10     }
11     $db = null;
12 } catch (PDOException $e) {
13     print "Error!: " . $e->getMessage() . "<br/>";
14     die;
15 }
16 $html = '';
17 foreach ($rs as $a => $kv) {
18     $name = $kv['city_name'];
19     //获得城市名称
20     $pyall = str_replace(" ", "", ucwords(pinyin($name)));
21     //获得城市名称的拼音，在用ucwords()  把拼音首字母转为大写
22     $one = strtoupper(pinyin($name, $ret_format = 'first'));
23     //获得汉字拼音首字母
24     $html[$a]['one'] = strtoupper(pinyin($name, $ret_format = 'one'));
25     //获得整个词的第一个字母  方便后面分组
26     $html[$a]['first'] = $one;
27     $html[$a]['html'] = '    <li data-value="' . $one . '" data-tags="' . $pyall . '" class="mui-table-view-cell mui-indexed-list-item">' . $name . '</li>';
28     //需要生成的html
29 }
30 array_multisort(array_column($html, 'one'), SORT_ASC, $html);
31 //对数组排序  ，按整个词的首字母排序
32 $list = array_group_by($html, $key = 'one');
33 //用到数据按键值分组
34 foreach (array_group_by($html, $key = 'one') as $a => $kv) {
35     echo '<a>' . $a . '</a>';
36     //输出显示时左侧的快速选择器
37     #echo '<li data-group="'.$a.'" class="mui-table-view-divider mui-indexed-list-group">'.$a.'</li>';    echo "\r\n";    //输出 分组名称
38     foreach ($kv as $kv2) {
39         //echo $kv2['html'];// 输出需要的html
40         //echo "\r\n";
41     }
42 }
43 /*
44 数据按键值分组
45 $arr  传入数组
46 $key  需分组的键值
47 调用方法  array_group_by($html, $key='one');
48 */
49 function array_group_by($arr, $key)
50 {
51     $grouped = [];
52     foreach ($arr as $value) {
53         $grouped[$value[$key]][] = $value;
54     }
55     if (func_num_args() > 2) {
56         $args = func_get_args();
57         foreach ($grouped as $key => $value) {
58             $parms = array_merge([$value], array_slice($args, 2, func_num_args()));
59             $grouped[$key] = call_user_func_array('array_group_by', $parms);
60         }
61     }
62     return $grouped;
63 }

 

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

转载于:https://www.cnblogs.com/yipiantian/p/7664845.html