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