`
flashdream8
  • 浏览: 678931 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

利用Dom4J 创建DhtmlXTree

    博客分类:
  • ajax
阅读更多

前段时间项目中要做一个供应商打分模块。供应商的打分项他的展现是一棵树,所以我就想到利用DhtmlXTree来实现,因为DhtmlXTree利用少量代码就可以实现动态加载一棵树的功能。

 

准备工作:

1.需要的js 和jar包

   dhtmlxcommon.js

   dhtmlxtree.js

   dhtmlxtree.css

 

   dom4j-1.6.1.jar

 

2.先建立一棵DhtmlXTree

 

<div id="treeboxbox_tree" style="width:400px; height:600px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;">
<script type="text/javascript">
	tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
</script>
 </div>

 

 

3.设置一下一些初始化参数

 

// 设置树的皮肤
tree.setSkin('dhx_skyblue');
// 设置树图片的路径
tree.setImagePath("../../images/dhtml/csh_yellowbooks/");
//设置树的编码
tree.setEscapingMode("GBK");

tree.enableCheckBoxes(0);            //是否显示复选框
//从XML 加载 DhtmlXTree
var s_loadURL = "<%=request.getContextPath()%>/bank/rating/getRatingProjectGuid.do";
tree.setXMLAutoLoading(s_loadURL);
tree.loadXML(s_loadURL);

 

 

4利用dom4j 生成XML

 

   /**
     * 生成一个可以生成DHtmlXTree的XML文件,包括根节点tree;
     * @return Document
     */
    public static Document createNewDhtmlXTreeXML(){
    	Document document = DocumentHelper.createDocument();
    	Element root = document.addElement("tree");
    	root.addAttribute("id", "0");
    	return document;
    }
    /**
     * 向 DHtmlXTree 中添加一个新的节点
     * @param element 父节点
     * @param id 节点ID
     * @param text 节点显示的名称
     * @param userData 用户 自己的数据保存在 userData 中 数据类型String
     * @param map 设置节点 相关属性的map (当前可以设置的属性有 im0,im1,im2,open,child)
     * @return Element
     */
    public static Element buildTreeNode(Branch element , String id , String text, String userData , Map proMap){
    	if (element!=null && id != null  && text !=null ) {
			Element item = element.addElement("item");
			item.addAttribute("id", id);
			item.addAttribute("text",text);
			if (proMap != null ) {
				String im0 = (String)proMap.get("im0");
				String im1 = (String)proMap.get("im1");
				String im2 = (String)proMap.get("im2");
				String open = (String)proMap.get("open");
				String child = (String)proMap.get("child");
				if (im0!=null && !"".equals(im0)) {
					item.addAttribute("im0",im0);
				}
				if (im1!=null && !"".equals(im1)) {
					item.addAttribute("im1",im1);
				}
				if (im2!=null && !"".equals(im2)) {
					item.addAttribute("im2",im2);
				}
				if (open!=null && !"".equals(open)) {
					item.addAttribute("open",open);
				}
				if (child!=null && !"".equals(child)) {
					item.addAttribute("child",child);
				}
			}
			if(userData != null && !"".equals(userData)){
				Element userdata = item.addElement("userdata");
				userdata.addAttribute("name", text);
				userdata.addText(userData);
			}
			return item;
		}else{
			System.out.println("Element对象为null 或者id 为null 或者text 为null ");
		}
			return null ;

    }

 

 

 

5 Dao 层 代码

	public String getRatingProjectXml(String parentId) throws Exception {
		Document doc = null;
		Element item = null;
		try {
			if (parentId==null || "".equals(parentId) || "null".equals(parentId)) {
				// 进入根节点进行操作
				Map proMap = new HashMap();
				//proMap.put("im0", "tombs.gif");
				proMap.put("open", "1");

				doc = XmlUtil.createNewDhtmlXTreeXML(); //  得到一个用于生成DHtmlXTree 的XML 文件

				// 添加根节点
				item = XmlUtil.buildTreeNode(doc.getRootElement(), Common.DOMAIN_ROOT_ID, Common.DOMAIN_ROOT_NAME, null, proMap);
				// 得到一级节点
				List<BRatingProject> bRatingProjects = getBRatingProjectByParentId(Integer.parseInt(Common.DOMAIN_ROOT_ID));
				getRatingProjectXml(item,bRatingProjects);
			}else {
				// 进入非根节点
				doc = XmlUtil.createNewXml();
				BRatingProject bRatingProject = getBRatingProjectById(Integer.parseInt(parentId));
				List<BRatingProject> bRatingProjects = getBRatingProjectByParentId(Integer.parseInt(parentId));
				int id = bRatingProject.getId();
				String name = bRatingProject.getName();
				/**是否叶子节点 1. 代表是叶子节点,0 代表不是叶子节点*/
				int isLeaf = bRatingProject.getIsLeaf();
				Map proMap = new HashMap();
				//proMap.put("im0","book_titel.gif");

				if (isLeaf==0) {
					proMap.put("child", "1");
				}
				item = XmlUtil.buildTreeNode(doc, id+"", name, null, proMap);


				getRatingProjectXml(item,bRatingProjects);
			}
			if (doc == null ) {
				doc = XmlUtil.createNewDhtmlXTreeXML();
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return doc.asXML();
	}

	private void getRatingProjectXml(Branch item, List<BRatingProject> childList) throws Exception{
		if (childList!=null && !childList.isEmpty() && item!=null) {
			for (BRatingProject bRatingProject : childList) {
				int id = bRatingProject.getId();
				String name = bRatingProject.getName();
				/**是否叶子节点 1. 代表是叶子节点,0 代表不是叶子节点*/
				int isLeaf = bRatingProject.getIsLeaf();
				Map proMap = new HashMap();
				//proMap.put("im0","book_titel.gif");
				if (isLeaf==0) {
					proMap.put("child", "1");
				}
				Element items = XmlUtil.buildTreeNode(item, id+"", name, null, proMap);
				if(isLeaf==0){
					// 递归
					List<BRatingProject> childLists = getBRatingProjectByParentId(id);
					getRatingProjectXml(items, childLists);
				}
			}
		}
	}

 

 

6 呈现层

 

/**
	 * 展示树
	 * @return
	 */
	public String getRatingProjectGuid(){
		HttpServletResponse response = getResponse();
		response.setContentType("text/xml; charset=GBK");
		response.setHeader("Cache-control","no-cache");
		try {
			String s_subId = getParameter("id");
			String xml = ratingDao.getRatingProjectXml(s_subId);
			//System.out.println(xml);
			response.getWriter().print(xml);
		} catch (Exception e) {
			e.printStackTrace();
			return "error";
		}

		return null;
	}

  

 

下面有一些DhtmlXTree 的一些资料。为了以后方便自己的查阅,特放在此处!

分享到:
评论

相关推荐

    tree用到js和dom4j-1.6.1.jar包

    在这个场景下,`dhtmlxtree` 和 `DOM4J` 这两个库就显得非常有用。让我们深入探讨一下这两个技术以及它们如何协同工作。 `dhtmlxtree` 是一个基于JavaScript的客户端组件,它允许开发人员在网页上创建动态的、可...

    dhtmlXtree树 右dhtmlXtree键菜单

    dhtmlXtree是一款功能强大的JavaScript库,用于在Web页面中创建交互式的树形结构。它提供了丰富的特性,如拖放操作、多选、上下文(右键)菜单、图标支持等,广泛应用于网站导航、数据组织和展示。在这个场景中,...

    dhtmlxtree

    `dhtmlxtree` 是一个基于JavaScript的富客户端树形组件,它允许在Web应用程序中创建交互式的、可扩展的树状视图。这个组件由DHTMLX Suite提供,它是一个广泛使用的JavaScript UI库,包含一系列用于构建富客户端界面...

    dhtmlxTree

    **四、dhtmlxTree的许可证** 根据提供的文件名,dhtmlxTree提供了多种许可证选择,包括OpenSource、Commercial和Enterprise版本: 1. **License_OpenSource.html**:可能涉及到开源许可证,比如GPL,允许自由使用...

    DHtmlXTree应用指南.pdf

    DOM4J提供了一系列API用于创建XML文件,包括: - **Element API**:用于创建XML元素。 - **Attribute API**:用于设置元素属性。 - **字符串化**:将构建好的XML文档转换为字符串形式。 ##### 5.3 加载XML文件 ...

    专业版dhtmlxtree下载

    dhtmlxtree是一款基于JavaScript的开源树形菜单控件,专为Web开发人员设计,用于在...通过学习和使用这两个核心脚本文件,开发者可以深入掌握如何在Web应用中有效地利用dhtmlxtree,提升项目的用户体验和功能完整性。

    dhtmlxtree的一个实用demo

    通过学习这个demo,开发者可以了解到如何利用dhtmlxtree来创建交互式树形结构,并实现复杂的业务逻辑,如权限分配。同时,源码的提供使得开发者有机会深入理解库的内部工作原理,进行二次开发或定制化需求。

    dhtmlxTree树形控件JavaScript

    dhtmlxTree是一款基于JavaScript的树形控件,它提供了丰富的功能和自定义选项,用于在Web应用程序中创建交互式的树状数据结构。这个控件允许开发者以灵活的方式展示层次化的信息,例如网站导航、文件系统目录或者...

    Dhtmlxtree的例子

    这个例子展示了如何简单地使用Dhtmlxtree,并且利用XML数据来构建树节点。 首先,我们需要理解Dhtmlxtree的核心概念。Dhtmlxtree是一个客户端的组件,它不依赖服务器端技术,如PHP或ASP.NET,而是通过JavaScript...

    dhtmlXTree1.6

    **dhtmlXTree1.6** 是一个基于JavaScript的组件,用于在Web应用程序中创建交互式的树状结构。这个组件允许开发者以动态和灵活的方式展示层次化的数据,常见于网站的导航菜单、文件系统或者组织架构等场景。...

    JS树:dhtmlxTree

    dhtmlxTree是一款功能丰富的JavaScript库,它允许开发者创建交互式、可定制的树形结构,适用于展示目录、组织结构图或任何具有层级关系的信息。 ### dhtmlxTree核心特性 1. **可扩展性**:dhtmlxTree支持动态加载...

    dhtmlxtree实例

    dhtmlxtree是一款强大的JavaScript树形控件,由DHTMLX Suite组件库提供,它允许开发者在Web应用程序中创建交互式的、可扩展的树状结构。dhtmlxtree支持多种特性,如节点的动态加载、复选框、右键菜单、拖放操作等,...

    第三方树控件dhtmlxTree 3.6

    dhtmlxTree是一款流行的JavaScript库,用于在Web应用中创建交互式的树形结构。版本3.6提供了丰富的功能和优化,使得开发人员能够轻松地在网页上实现动态的、可自定义的树形视图。以下是对dhtmlxTree 3.6及其主要特性...

Global site tag (gtag.js) - Google Analytics