最需要的時候遇見你OrgChart

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 when 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.

這是下載後的文件，資料夾中除了css、js、font其它的資料夾都是不同類型的組織架構圖。

這裡喀喀使用的是第一種ajax-datasource

將需需要的檔案放到資源目錄下即可

在ajax -datasource資料夾下有個index.html，裡邊附帶的有案例這時候我們就需要將這份程式碼複製到專案中需要展示的頁面中，也就是簡單的設定css、js的載入路徑而已。

嗯吶！就這樣，很簡單吧！著實很簡單。 來看看效果唄！ 這時有沒有疑問，這些資料是哪裡來的，那就一起找找嗆！

資料原來在這裡，那咱們就需要把這段js程式碼複製到自己需要展示的地方了。但是數據肯定不是固定的，是後台傳過來的。嗯，對，沒錯

這時候先別急，下看看它的資料結構，裡面有name、title。

那麼試想一下， 我們把這幾個數值修改一下，還會正常顯示嗎？

果不其然，涼透了，為什麼要修改這個鍵值呢！因為你的資料庫欄位不可能跟這個是完全符合的啊！

這時候就需要看文件了，喀喀爾這裡直接給解決方法。

只需要在加一行程式碼即可，其餘的參數還是需要大家去查看文件解決哈！

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 check 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! Not much explanationAt this point, type conversion is required. Open the TP framework document and take a look

After query, 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.

以上是最需要的時候遇見你OrgChart的詳細內容。更多資訊請關注PHP中文網其他相關文章！