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

dhtmlxTree 加载大数据量树

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