首页 > 代码库 > dhtmlxTree 加载大数据量树

dhtmlxTree 加载大数据量树

2024-10-11 11:19:38   214人阅读

 在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 加载大数据量树


联系
我们