標籤：1.0 body app 地址 方法表 介面 first dhtml 滾動
在dhtmlxTree中最佳化載入大資料集：Dynamic Loading 動態載入
一、dhtmlxTree API翻譯：
如果樹中包含大量的節點(或者使用者不想在載入隱藏節點上浪費時間)，最好在請求時載入它們，而不是立即載入它們。
為了實現這一目的，引入了使用XML動態載入樹層級的功能。
啟用動態載入：
1.使用者應該在XML中表示以這種方式動態載入的節點：給所有參數都加上child="1",表示它有子節點，點擊時才會動態載入該對象下的子節點。
例：<?xml version="1.0" encoding="iso-8859-1" ?> <tree id="0"> <item text="Surveillance" id="a1" im0="book.gif" … child="1"/> <item …/> … </tree>
2. 設定setXMLAutoLoading方法表示開啟動態載入
例：tree.setXMLAutoLoading(url); tree.load(file); // load the first level of the tree
二、項目中實際運用
1. 先在頁面匯入dhtmlXTree的js，https://docs.dhtmlx.com
2. dhtmlXTree初始化，在介面中：
<body>
<div id=‘treediv2‘ class=‘field-tree-panel‘></div>
</body>
<script type="text/javascript">
var myTree;
function initTree(){
myTree = new dhtmlXTreeObject("treediv2", "100%", "100%", 0); //定義樹對象
myTree.setImagePath("/esa/resources/dhtmlxTree/codebase/imgs/dhxtree_skyblue/"); //設定樹樣式地址
myTree.enableCheckBoxes(true); //設定複選框
myTree.enableThreeStateCheckboxes(false); //設定選中父節點時是否全選子節點，true:全選對勾，false:只是父節點前對勾
myTree.setDataMode("xml"); //設定資料載入的方式，可選XML、JSON、CSV、JS ARRAY
myTree.setXMLAutoLoading("url"); //設定自動載入的url
myTree.load("url?id=0"); //設定第一次載入的url
}
</script>
3. 後台方法：
public String getTree(String id, HttpServletResponse servletResponse){
servletResponse.setContentType("text/xml;charset=UTF-8"); //中文亂碼解決方案
if(StringUtils.isEmpty(id)){
return null;
}
StringBuilder sBuilder = new StringBuilder();
sBuilder.append("<?xml version=\"1.0\" encoding=\"utf-8\" ?>"); //設定xml頭
if("0".equals(id)){
//第一次載入根節點
sBuilder.append("<tree id=\"0\"><item text=\"ROOT\" id=\"-1\" child=\"1\" open=\"0\">");
sBuilder.append("</item></tree>");
}else{
//點擊加號時動態載入子節點
sBuilder.append("<tree id=\"" + id + "\" ");
sBuilder.append(">");
List<Map<String, Object>> nodeList = customReportService.queryTree(id);
for (Map<String, Object> map : nodeList) {
sBuilder.append(" <item text= ");
sBuilder.append("\"" + map.get("NAME").toString() + "\"");
sBuilder.append(" id = ");
sBuilder.append("\"" + map.get("ID").toString() + "\"");
sBuilder.append(" child=\"1\" /> ");
}
sBuilder.append("</tree>");
}
return sBuilder.toString();
}
4. 需注意的屬性
open為任意值表示開啟節點(當開啟所有節點時，會不斷自動載入下級節點，頁面會滾動。建議只開啟根節點展示一級的資料。點擊加號自動再去載入下級節點)
checked為任意值表示選擇節點
child為1表示有子節點
參考https://docs.dhtmlx.com/tree__increasing_tree_s_performance.html官方文檔
dhtmlxTree 載入大資料量樹
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
