資訊專欄INFORMATION COLUMN
摘要：組織架構圖說明插件皆可用于使用方法中使用插件效果圖定制化內容的效果圖插件說明很好的的組織架構圖，從上到下按層級展示匯報關系支持定制化內容，和異步加載子節點下面會講到。且在開發中，用戶希望能夠根據數據定制每一塊的內容展示。
spacetree組織架構圖 說明
jquery插件皆可用于react,使用方法:react中使用jquery插件
效果圖 定制化內容的效果圖 插件說明很好的canvas的組織架構圖，從上到下按層級展示匯報關系, 支持定制化內容，和異步加載子節點(下面會講到)。 相關api請參考：
官網
或是example1.js
var data = {
id:01, //每個節點有一個唯一的標示
data:{}, //存放每個節點數據
children:[ //存放元素子節點
{
id:011,
data:{},
children:[]
},
{
id:012,
data:{},
children:[]
}
]
}
開發中的痛點問題
插件默認加載全部數據，當后臺數據量太大，一次返回時， 會造成頁面卡死，用戶體驗相當不好。且在開發中，用戶希 望能夠根據數據定制每一塊的內容展示。
#### 解決辦法1
對于第一個問題：每次只返回兩層的數據,(注意，所有的數據必須要有一個不重復的id) 剩下的數據可以通過異步加載的方式給架構圖添加子節點 在官網上找到一個辦法,當通過ajax請求回來的數據后通過：
st.addSubtree(data, type, { //st指的是創建的樹對象，可以將其設為全局變量，
以便外面拿到
//data即ajax獲取的值
//type:"animate":"replot"
hideLabels: false,
onComplete: function() { //加載完成后的回調
Log.write("subtree added");
}
});
同時還有另外一個api,用于刪除子節點
st.removeSubtree(id, true, "animate", { //id:想要刪除子節點的節點的id標識
hideLabels: false, //動畫執行過程中是否隱藏節點
onComplete: function() {
removing = false;
Log.write("subtree removed");
}
});
解決辦法2
對于第二個問題：同樣有一個api用lai定制化每個節點的內容 onCreateLabel:里面有兩個參數label,node:label指的是容器 div,node指的是每塊對應的數據，這里用jquery的方式根據數據 動態生成內容。
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
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112584.html
摘要：組織架構圖說明插件皆可用于使用方法中使用插件效果圖定制化內容的效果圖插件說明很好的的組織架構圖，從上到下按層級展示匯報關系支持定制化內容，和異步加載子節點下面會講到。且在開發中，用戶希望能夠根據數據定制每一塊的內容展示。 spacetree組織架構圖 說明 jquery插件皆可用于react,使用方法:react中使用jquery插件 效果圖 showImg(https://segme...
摘要：而從技術實現角度，微前端架構解決方案大概分為兩類場景單實例即同一時刻，只有一個子應用被展示，子應用具備一個完整的應用生命周期。為了解決產品研發之間各種耦合的問題，大部分企業也都會有自己的解決方案。 原文鏈接：https://zhuanlan.zhihu.com/p/... Techniques, strategies and recipes for building a modern ...
摘要：是負責展示京東商品的落地頁面。比如京東首頁，正常情況加載完頁面一共有多個節點，基本上全部用于展示商品信息廣告圖和內容布局，頁面上的三方異步服務也比較少。 原文：https://keelii.github.io/2016/07/31/something-have-to-say-with-JD-item 簡介 詳情頁也叫做單品頁，域名以「item.jd.com/skuid.html」為格式...
