資訊專欄INFORMATION COLUMN
摘要：組織架構(gòu)圖說明插件皆可用于使用方法中使用插件效果圖定制化內(nèi)容的效果圖插件說明很好的的組織架構(gòu)圖，從上到下按層級展示匯報關(guān)系支持定制化內(nèi)容，和異步加載子節(jié)點(diǎn)下面會講到。且在開發(fā)中，用戶希望能夠根據(jù)數(shù)據(jù)定制每一塊的內(nèi)容展示。
spacetree組織架構(gòu)圖 說明
jquery插件皆可用于react,使用方法:react中使用jquery插件
效果圖 定制化內(nèi)容的效果圖 插件說明很好的canvas的組織架構(gòu)圖，從上到下按層級展示匯報關(guān)系, 支持定制化內(nèi)容，和異步加載子節(jié)點(diǎn)(下面會講到)。 相關(guān)api請參考：
官網(wǎng)
或是example1.js
var data = {
id:01, //每個節(jié)點(diǎn)有一個唯一的標(biāo)示
data:{}, //存放每個節(jié)點(diǎn)數(shù)據(jù)
children:[ //存放元素子節(jié)點(diǎn)
{
id:011,
data:{},
children:[]
},
{
id:012,
data:{},
children:[]
}
]
}
開發(fā)中的痛點(diǎn)問題
插件默認(rèn)加載全部數(shù)據(jù)，當(dāng)后臺數(shù)據(jù)量太大，一次返回時， 會造成頁面卡死，用戶體驗(yàn)相當(dāng)不好。且在開發(fā)中，用戶希 望能夠根據(jù)數(shù)據(jù)定制每一塊的內(nèi)容展示。
#### 解決辦法1
對于第一個問題：每次只返回兩層的數(shù)據(jù),(注意，所有的數(shù)據(jù)必須要有一個不重復(fù)的id) 剩下的數(shù)據(jù)可以通過異步加載的方式給架構(gòu)圖添加子節(jié)點(diǎn) 在官網(wǎng)上找到一個辦法,當(dāng)通過ajax請求回來的數(shù)據(jù)后通過：
st.addSubtree(data, type, { //st指的是創(chuàng)建的樹對象，可以將其設(shè)為全局變量，
以便外面拿到
//data即ajax獲取的值
//type:"animate":"replot"
hideLabels: false,
onComplete: function() { //加載完成后的回調(diào)
Log.write("subtree added");
}
});
同時還有另外一個api,用于刪除子節(jié)點(diǎn)
st.removeSubtree(id, true, "animate", { //id:想要刪除子節(jié)點(diǎn)的節(jié)點(diǎn)的id標(biāo)識
hideLabels: false, //動畫執(zhí)行過程中是否隱藏節(jié)點(diǎn)
onComplete: function() {
removing = false;
Log.write("subtree removed");
}
});
解決辦法2
對于第二個問題：同樣有一個api用lai定制化每個節(jié)點(diǎn)的內(nèi)容 onCreateLabel:里面有兩個參數(shù)label,node:label指的是容器 div,node指的是每塊對應(yīng)的數(shù)據(jù)，這里用jquery的方式根據(jù)數(shù)據(jù) 動態(tài)生成內(nèi)容。
onCreateLabel: function (label, node) { //
label.id = node.id;
var level = ["第一層","第二層","第三層","第四層","第五層","第六層"];
var wrap = ""+
""+
""+
""+
""
var $wrap = $(wrap);
$wrap.find(".secondLevel").text(node.name);
$wrap.find(".level").text(level[node._depth])
$(label).append($wrap);
}
最后附上github地址,歡迎star
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112584.html
摘要：組織架構(gòu)圖說明插件皆可用于使用方法中使用插件效果圖定制化內(nèi)容的效果圖插件說明很好的的組織架構(gòu)圖，從上到下按層級展示匯報關(guān)系支持定制化內(nèi)容，和異步加載子節(jié)點(diǎn)下面會講到。且在開發(fā)中，用戶希望能夠根據(jù)數(shù)據(jù)定制每一塊的內(nèi)容展示。 spacetree組織架構(gòu)圖 說明 jquery插件皆可用于react,使用方法:react中使用jquery插件 效果圖 showImg(https://segme...
摘要：而從技術(shù)實(shí)現(xiàn)角度，微前端架構(gòu)解決方案大概分為兩類場景單實(shí)例即同一時刻，只有一個子應(yīng)用被展示，子應(yīng)用具備一個完整的應(yīng)用生命周期。為了解決產(chǎn)品研發(fā)之間各種耦合的問題，大部分企業(yè)也都會有自己的解決方案。 原文鏈接：https://zhuanlan.zhihu.com/p/... Techniques, strategies and recipes for building a modern ...
摘要：遞歸遞歸算法在日常工作中算是用的比較多的一種，比如樹的遍歷，多層級樹狀結(jié)構(gòu)的生成，遍歷尋找某個樹節(jié)點(diǎn)等先來看下數(shù)據(jù)結(jié)構(gòu)張飛關(guān)羽劉備荀彧關(guān)平曹操貂蟬一般情況下后臺返回類似于如上的嵌套數(shù)據(jù)結(jié)構(gòu)，或者說只得到一部分?jǐn)?shù)據(jù)，點(diǎn)擊某個子節(jié)點(diǎn)，異步加載節(jié) 遞歸 遞歸算法在日常工作中算是用的比較多的一種，比如DOM樹的遍歷，多層級樹狀結(jié)構(gòu)的生成，遍歷尋找某個樹節(jié)點(diǎn)等 1 先來看下數(shù)據(jù)結(jié)構(gòu) var re...
摘要：是負(fù)責(zé)展示京東商品的落地頁面。比如京東首頁，正常情況加載完頁面一共有多個節(jié)點(diǎn)，基本上全部用于展示商品信息廣告圖和內(nèi)容布局，頁面上的三方異步服務(wù)也比較少。 原文：https://keelii.github.io/2016/07/31/something-have-to-say-with-JD-item 簡介 詳情頁也叫做單品頁，域名以「item.jd.com/skuid.html」為格式...
