最需要的時候遇見你OrgChart

聊聊OrgChart 使用，優(yōu)雅的方式為你展現(xiàn)舒服的組織架構(gòu)圖，

前言

閑來無事寫一個多級用戶關(guān)系層，于是就存在展示的問題。這時OrgChart就派上了用場。

在用的過程中，有一耐耐的小問題，咔咔就借著問題點，給大家介紹這款插件的使用。

最終效果如下

當(dāng)然咔咔最終需要實現(xiàn)的效果肯定不是這個樣子了，這個只是這個插件可以實現(xiàn)出來的效果。看了這個圖你就知道適不適合自己的項目了。

一、接入OrgChart

-咔咔提供不了，會提示廣告的，如果找不到評論區(qū)見。

這是下載后的文件，文件夾中除了css、js、font其它的文件夾都是不同類型的組織架構(gòu)圖。

這里咔咔使用的是第一種ajax-datasource

將需需要的文件放到資源目錄下即可

在ajax-datasource文件夾下有個index.html，里邊附帶的有案例

這個時候我們就需要將這份代碼復(fù)制到項目中需要展示的頁面中，也就是簡單的配置css、js的加載路徑而已。

嗯吶！就這樣，很是簡單吧！著實很簡單。

來看看效果唄！

這時有沒有疑問，這些數(shù)據(jù)是哪里來的，那就一起找找唄！

數(shù)據(jù)原來在這里，那咱們就需要把這段js代碼復(fù)制到自己需要展示的地方了。但是數(shù)據(jù)肯定不是固定的，是后臺傳過來的。嗯，對，沒錯

這個時候先別著急，下看看它的數(shù)據(jù)結(jié)構(gòu)，里邊有name、title。

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

果不其然，涼透透了，為什么要修改這個鍵值呢！因為你的數(shù)據(jù)庫字段不可能跟這個是完全符合的啊！

這個時候就需要看文檔了，咔咔這里直接給出解決方法。

只需要在加一行代碼即可，其余的參數(shù)還是需要大家去查看文檔解決哈！

好了，這個時候一切工作準(zhǔn)備就緒，只需要從后臺傳入數(shù)據(jù)就ok了，終于就剩最后一步了。

咔咔把數(shù)據(jù)保存到了input中，然后獲取出來，終于完成了。

來吧！展示！納尼！怎么是這個樣子，有一個值怎么是空的。

這個時候二話沒說，打開后臺打印一下數(shù)據(jù)看看什么情況。數(shù)據(jù)一切安好。

二、分析問題

針對上面出現(xiàn)的問題，不得不在回到演示案例中。

其實在這個數(shù)據(jù)結(jié)構(gòu)中，可以清楚的看明白，那就是鍵值都是帶引號的。

不信的話來測試一下，自定義一份數(shù)據(jù)，然后檢測一下。

經(jīng)過驗證這樣的數(shù)據(jù)是可以的，那么在來試一下業(yè)務(wù)中的真實數(shù)據(jù)。

經(jīng)過一番驗證，相信伙伴們都已經(jīng)了解這個問題了

三、解決問題

先看一下數(shù)據(jù)庫給的數(shù)據(jù)類型為int，這里為什么使用int就不提了哈！項目需要，嗯吶！不多做解釋了

此時就需要進(jìn)行類型的轉(zhuǎn)換了，打開TP框架的文檔，瞅一眼

經(jīng)過查詢，目前TP框架只支持這幾種類型的轉(zhuǎn)換。

既然這條路通不了，那么就尋找其它的路，條條大路通Bug對吧！

在MySQL中有倆個函數(shù)可以處理類型轉(zhuǎn)換， CAST、 CONVERT這倆個函數(shù)都可以。

但咔咔今天給大家說一種新的方式，這種方式大家都見過，那就是PHP中函數(shù)rtrim。

你是不是會說，不是吧！這都可以，rtirm都知道是處理右側(cè)空白字符串或者預(yù)定義字符的

但是來看一下技術(shù)細(xì)節(jié)，返回的是修改的字符串，真好！

整起，修改查詢方式。

來吧！看一下效果，這就很是nice

四、總結(jié)

學(xué)習(xí)并使用OrgChart

了解TP框架的類型轉(zhuǎn)換

學(xué)習(xí)并使用MySQL的類型轉(zhuǎn)換

對rtirm函數(shù)學(xué)習(xí)

堅持學(xué)習(xí)、堅持寫博、堅持分享是咔咔從業(yè)以來一直所秉持的信念。希望在偌大互聯(lián)網(wǎng)中咔咔的文章能帶給你一絲絲幫助。我是咔咔，下期見。

數(shù)據(jù)結(jié)構(gòu)

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。