使用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'
??
?
?