标签：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官方文档
标签：1.0 body app 地址 方法表 界面 first dhtml 滚动
原文地址：http://www.cnblogs.com/nstart/p/7060115.html
