Meet you OrgChart when I need you most

Let’s talk about the use of OrgChart, showing you a comfortable organizational chart in an elegant way,

Foreword

I have nothing to do to write a multi-level user relationship layer, so there is a problem of display. This is where OrgChart comes in handy.

In the process of using it, there was a small problem. Kaka will use the problem to introduce the use of this plug-in.

The final effect is as follows

Of course, the final effect that Kaka needs to achieve is definitely not like this. This is just the effect that this plug-in can achieve. After looking at this picture, you will know whether it is suitable for your project.

1. Access OrgChart

The download address cannot be provided by Kaka, and an advertisement will be prompted. If you can't find it, see the comment area.

This is the downloaded file. Except for css, js, and font, the other folders in the folder are different types of organizational charts.

Here Kaka uses the first ajax-datasource

Put the required files in the resource directory

In ajax There is index.html under the -datasource folder, and there are cases attached to itAt this time, we need to copy this code to the page that needs to be displayed in the project, which is to simply configure the loading path of css and js. .

OK! That's it, it's very simple! It's really simple. Let’s see the effect! At this time, if you have any doubts about where this data comes from, let’s look for it together!

The data is originally here, then we need to copy this js code to the place where we need to display it. But the data is definitely not fixed, it is transmitted from the background. Well, yes, that’s right

Don’t worry at this time, let’s take a look at its data structure, which contains name and title.

So just imagine, if we modify these values, will they still display normally?

As expected, it’s so cool. Why do you need to modify this key value? Because your database fields cannot be completely consistent with this!

At this time, you need to read the documentation. The solution is given directly here.

You only need to add one line of code. The rest of the parameters still need to be checked in the documentation!

Okay, now everything is ready. All you need to do is pass in the data from the background. Finally, the last step is left.

Kaka saved the data into the input, then retrieved it, and it was finally completed.

bring it on! exhibit! Nani! Why is it like this? Why is one value empty?

Without saying anything at this time, I opened the background and printed the data to see what happened. The data is fine.

Insert picture description here

2. Analysis of the problem

In view of the above problems , have to go back to the demo case.

In fact, in this data structure, you can clearly see that the key values ​​are all in quotes.

If you don’t believe it, test it, customize a piece of data, and then test it.

It has been verified that such data is acceptable, so let’s try the real data in the business.

After some verification, I believe that all partners have understood this problem

3. Solve the problem

Let’s first look at the data type provided by the database as int. I won’t mention why int is used here! The project needs it, huh! No further explanationAt this point, type conversion is required. Open the TP framework document and take a look

After querying, the TP framework currently only supports these types of conversions.

Since this road cannot be reached, then look for other roads. All roads lead to bugs, right?

There are two functions in MySQL that can handle type conversion, both CAST and CONVERT.

But Kaka will tell you a new way today, which everyone has seen before, that is the function rtrim in PHP.

You can say that, right? This is all ok, rtirm knows that it handles blank strings or predefined characters on the right

But let’s take a look at the technical details. What is returned is the modified string, which is great!

Let’s start by modifying the query method.

bring it on! Take a look at the effect, it’s very nice

4. Summary

• Learn and use OrgChart
• Understand the TP framework Type conversion
• Learn and use MySQL type conversion
• Learn about rtirm function

Persistence in learning, persistence in blogging, and persistence in sharing are the beliefs that Kaka has always adhered to since its beginning. I hope that Kaka’s articles on the huge Internet can bring you a little bit of help. I’m Kaka, see you next time.

The above is the detailed content of Meet you OrgChart when I need you most. For more information, please follow other related articles on the PHP Chinese website!