使用dhtmlxtree 构建目录树实例

最新推荐文章于 2020-10-20 14:02:55 发布

wangpingjing

最新推荐文章于 2020-10-20 14:02:55 发布

阅读量166

点赞数

CC 4.0 BY-SA版权

分类专栏： Web编程控件文章标签： XSL XML CSS HTML

本文链接：https://blog.youkuaiyun.com/wangpingjing/article/details/83636614

Web编程控件专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用dhtmlXTree插件创建部门用户列表，并提供了具体的JavaScript实现代码及示例。通过Ajax获取组织结构数据并用XSL进行转换，最终加载到dhtmlXTree中展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组成

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'