iOS Province and City Two-Level联动 Data Organization PHP Version

The reason for publishing this blog is also due to a small Demo implemented in recent development work, of course, this Demo does not involve some content of the App in work. The Demo to be implemented below is universal. Due to the iteration of project requirements, it is required to add the information of provinces and cities where the branch is located in the bank card binding. A relatively good way to select this kind of information in iOS at that time was to use UIPickerView to display it. Of course, the information of provinces and cities on UIPickerView is linked, and we set it as a two-level linkage due to the requirement of user selection of provinces and cities. Of course, the principle of multi-level linkage is the same. Since the old project used Objective-Written in C, although it is mixed with Swift and OC now, you still need to use OC to implement new features on the VC, so the Demo in today's blog is not implemented in Swift, but the principle is the same.

The screenshot below is the running effect of the Demo to be introduced in today's blog, and today's blog is to generate the data required for PickerView and encapsulate the PickerView below. From the animation below, it is not difficult to see that after selecting a province in the first column, the second column will automatically display all the prefectural-level cities under the province. After clicking, the corresponding Label at the top will display all the selected provinces and cities and the corresponding codes. For the specific details, please refer to the rough animation below.

　　

1. Generation of data source (from Excel to Plist)

1Preparation for organizing data

Before encapsulating the above PickerView control, we need to have data, that is, we need to have the names of provinces and cities, the corresponding codes for each province and city, and the corresponding relationship between provinces and cities. Of course, these data can be found in large quantities on the Internet, and authoritative data should be checked from the data provided by 'National Bureau of Statistics'. The two screenshots below are two sheets in an Excel table, which is given by a program媛 on our server, and can be regarded as a standard between the client and server, and it is estimated that it is also downloaded from the Internet. The information of provinces and cities and codes below are consistent with those provided by the National Bureau of Statistics, which is beyond doubt.

How do I use this Excel table? I want to parse the Excel table directly to read the data through OC or Swift, and then process it into the format I want. However, after a series of investigations, I feel that this solution is quite complex, so I had to look for another way. Then, I remembered the PHPExcel framework I used before, because I used PHPExcel to read Excel files when I was doing PHP development. The PHPExcel is quite easy to use, and it is not complex at all, so I decided to use PHPExcel to read the data from the two sheets below.

After reading the data using PHPExcel, we reorganize the data and generate JSON for use by iOS. After iOS receives the JSON, it parses it and stores it in a plist file. This way, we can retrieve the 'provinces and cities' related data from the plist file, and then we can encapsulate our UIPickerView. This blog will step by step complete this thing. Of course, you can also use SQLite database to store the data from the Excel file below, create two tables, one for provinces and one for cities, and use foreign keys for one-to-many association. Using SQLite database is another solution; in this case, we use plist files because they are relatively simple, as the data is less. The plist file can be used on our pickerView. If you want to use SQLite, that's also quite OK. This blog only provides the plist file solution.

2Using PHPExecl to read provincial and municipal Excel data

In the Excel data above, the first Sheet stores the provinces and their corresponding codes, while the second Sheet stores the cities and their codes, along with the province each city is located in. Next, we will use the PHPExcel third-party framework to read the above Excel data. For more information about PHPExcel, please refer to its official documentation at: https://phpexcel.codeplex.com/The following code is used to read the above Excel file using PHPExcel, and process the data. The processed data is then encoded into JSON. We will introduce the relevant PHP code below.

(1Loading the PHPExcel framework and the provincial and municipal Excel files--province.xls

The PHP code snippet below is used to load the PHPExcel framework, create a file reader object $objReader using PHPExcel_IOFactory, and公告the $objReader object to load our province.xls file. After opening, it returns a file handle object $objPHPExcel for operating the opened Excel file. We can operate the opened Excel file through $objPHPExcel. The specific code is shown as follows.

(2Reading the Excel file content through the above $objPHPExcel object

Next, we need to use the $objPHPExcel object to retrieve the data from province.xml. Below are the comments added to the main code, which should still be clear. In the following code snippet, the $dataArray array is used to store all the Sheet data from province.xml. We loop twice to open two Sheets in the Excel, select the corresponding Sheet (from left to right, from 0 to n) through the setActiveSheetIndex() method of the $objPHPExcel object, and obtain the currently selected Sheet through the getActiveSheet() method of the object. After selection, it returns an $objWorksheet object, which we can use to read the data of each row and column in the current Sheet.

We iterate over each row of the current Sheet using foreach, and the same foreach is also used to iterate over the data of each column in a row. We store the data of each column into the $tempRowArray array, and then store the data of each row, i.e., $tempRowArray, into the Sheet data $tempSheetArray. Finally, we store the current Sheet's data $tempSheetArray into the $dataArray. The specific implementation is as follows:

3.Data verification

By following the above steps, we can store the data of each Sheet in Excel into our array. The data result is as follows: $dataArray stores the data of each Sheet ($tempSheetArray), and Sheet ($tempSheetArray) contains multiple rows ($tempRowArray), and each row ($tempRowArray) contains multiple columns. Therefore, dataArray corresponds to the entire Excel table. We have also obtained all the Excel data. After the above code, $dataArray stores the Excel data. For safety, we print the data in $dataArray. Below is our test code.

When writing programs, in order to reduce the number of bugs and the difficulty of debugging bugs, we must develop the good habit of debugging while writing code. This will help us to find and correct bugs in time. After writing a small functional module, we test it. If there are problems, it is easy to locate where the bug is.

　　

The following code prints the data stored in $dataArray, which can help us check whether the data stored in $dataArray meets our expectations. The output result below is the result of the above test case, with the red box being the data from the first Sheet, and the one below being the data from the second Sheet. A general look shows that it meets our expectations, indicating that there are no problems with the previous code, and we can associate the data in $data and generate JSON data.

　

4Associate city and province data

As mentioned above, we have already read the data from Excel and stored the data in different arrays in the Sheet. Next, we will process the data. This part is to associate the data of provinces and cities, which is to merge the data from the two Sheets into a single data block. Below is a structure diagram of the data we will store. The whole is an array, with each item being a dictionary, representing a province. Each province's dictionary includes the province code Code, province name Name, and all cities Citys. Citys stores an array. Each item in the array is a dictionary, representing a city. Each city's dictionary includes the city name Name and city code Code. The data structure is as shown below.

　　

Refer to the figure above, we need to process the data we read, and reorganize the data into the structure mentioned above. The following code block is for reorganizing the data from the read Excel table. After processing with the following code, we can obtain the data in the above structure. The $allDataArray stores all data information, $provinceTempData temporarily stores all information of each province, and $currentProvinceCitys stores all city information in the current province. The if statement in the second loop is responsible for managing the relationship between provinces and cities, and the specific code and code comments are as follows.

After the above code, all the data will be stored in $allDataArray. The above Json encoding is output for $allDataArray. Here we take Hebei Province as an example. The structure in the figure below corresponds to the above data structure chart by one-to-one. This is the data we want. Up to this point, our data processing task has been completed half, because we have obtained the JSON we want.

5Parse the above JSON data and store it in the Plist file

After the above steps, the work of PHP is basically over. Next, we need to use the iOS client to access the above address, obtain the above generated JSON data. After obtaining the JSON data, we parse the JSON data and store it in the plist file in the sandbox. In this way, we can load our provincial and city data from the plist file.

The following code segment is the code of our iOS client. The code usesNSURLSessionDataTask to request the file where the above PHP code is located to get the JSON data of provinces and cities. After obtaining the JSON data, the data is parsed, converted into an array, and then stored in the PList file in the sandbox through NSFileManager. If you want to use it externally, you just need to find the sandbox path in the simulator and copy out the plist file. The following code is the network request+JSON Parsing+The code stored in the Plist file.

After the execution of the above code, you will find a file named province.plist in the sandbox of the above App in your simulator. The file stores the provincial and city data we need to use. The data storage structure of this plist file is the data structure we have introduced above, and the following is a partial screenshot of the data in the plist file. By now, we have obtained a plist file that meets our expectations and contains provincial and city data.

　

Two: Usage method of encapsulating PickerView for selecting provinces and cities

Encapsulation is not simply the use of PickerView, we need to consider the user-friendliness and scalability when writing the encapsulation code. In this case, I have only done a simple encapsulation of PickerView, but there are still some干货, mainly the idea. After the data organization of the above module, we can organize the data from the Excel document provided by the server into the plist data we want. The main theme of this part is to read the data in the plist file and display it on the secondary联动 PickerView for user selection. After the user completes the selection, the name of the province and city and the corresponding codes are returned. Let's start with the encapsulation of our control.

1.Directory structure of the encapsulated control

First, let's take an overall look at the directory structure of the encapsulated control we have created, and get a general understanding of this encapsulated control. The screenshot below is the directory structure of the encapsulated control we have created. Since we encapsulate the UIPikcerView that displays the province and city information, we call it ProvincePickerView here. ProvincePickerView is the component we encapsulated. The user only needs to instantiate it and add it to its view to use it. The province.plist data below is the data we generated above, containing the province and city information. The data source of our ProvincePickerView is the province.plist file.

ProvinceModel stores the name and code of the current selected province and city. The second screenshot below is the content of ProvinceModel. provinceCode stores the code of the current selected province, provinceName stores the name of the selected province, cityCode stores the code of the selected city, and cityName stores the name of the selected city. The specific code is as follows.

2.Initialization and calling method of the encapsulated control

Next, let's take a look at the usage of the ProvincePickerView we encapsulated, which is quite simple to use. The following code block is the initialization method of ProvincePickerView. After initializing ProvincePickerView, add it to the view where ProvincePickerView needs to be displayed, and then set the Block callback of the ProvincePickerView object. This callback will be executed when the user clicks the complete button on ProvincePickerView, and return the Model data of the current province and city selected by the user.

Above is the initialization of ProvincePickerView and setting the data callback Block. The following code block is used to display ProvincePickerView. Calling the showPickerView method will pop up the ProvincePickerView below. Since ProvincePickerView itself has a cancel button, it will automatically retract after cancellation, so we do not need to provide a method for the user to retract ProvincePickerView, making it relatively simple to use.

Part Three: Code Sharing

Since the blog has a limited length, I will not paste the code encapsulated in ProvincePickerView one by one. In short, the core is the encapsulation of the corresponding methods in the two agents, UIPickerViewDelegate and UIPickerViewDataSource. And how to display and hide the PickerView, in other words, where to place the PickerView for display. Those who are interested can analyze the code shared on GitHub below. Everything is detailed, so there is no need to elaborate more here.

The code screenshot below is part of the code shared on GitHub, which can be said to have detailed comments. Those who are interested can read it themselves. If there are any errors in the code, please point them out.

All the code above is presented in the form of screenshots, which is not important. At the end of the blog, all the relevant code will be provided, including the above PHP code and the specific implementation of PickerView. Well, since the blog has a limited length, let's stop here for today. Below is the sharing link of the relevant code of this blog.

GitHub sharing address:https://github.com/lizelu/ProvincePickerDemo

That's all for this article. I hope it will be helpful to everyone's learning and also hope everyone will support the Yelling Tutorial.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please report via email to codebox.com (replace # with @) with relevant evidence. Once verified, this site will immediately delete the infringing content.