使用dhtmlxtree 构建目录树实例

?组成

??? dhtmlxcommon.js

??? dhtmlxtree.js

??? 可选图片和css

?

使用dhtmlxtree创建部门用户列表实例 效果如图：

?

图一、部门用户列表

?

具体实现代码：

//用户列表    function initUserTree(){$.get("userAction!UserTree.do?random="+Math.random(),function(strxml){                     //strxml 类似<?xml version="1.0" encoding="UTF-8"?>                     //<userTree><deptInfo name="规划局" parentid="0"                     //deptid="1003"><userInfo name="李四" //parentid="1003"                      //userid="248"></userInfo></deptInfo></userTree>                     var xmlDom=BrowserAdepter.getDomDocument();                     xmlDom.loadXML(strxml);     if(xmlDom.xml=="") return false;//xsl转换     var xsl =BrowserAdepter.getDomDocument();     xsl.async = false;     xsl.load("javascripts/page/rolemanage/userTree.xsl");     var formatHtml=xmlDom.transformNode(xsl);      formatHtml=formatHtml.replace('<?xml version="1.0" encoding="UTF-16"?>',"");     constructUserTree(formatHtml);});    };    function constructUserTree(xmlStr){tree = new dhtmlXTreeObject("treebox", "100%", "100%", 0);tree.setSkin('dhx_skyblue');tree.setImagePath("javascripts/page/rolemanage/codebase/imgs/csh_vista/");tree.enableTreeLines(true);tree.setOnClickHandler(onNodeClick);tree.loadXMLString(xmlStr);    };        //点击节点触发事件    function onNodeClick(){          //insert 业务逻辑    }

?

?

? 以及html中的div容器 'treebox'

??

?

?