开发中,我们常常需要采用树型显示菜单,下面介绍一种功能特别强大的树dhtmlXTree。在SSH框架中,若要使用dhtmlXTree需要以下几步:
1、在Action中实现方法,从数据库中读取要显示的数据,通过jdom,将数据格式化成xml形式的串,将生成的串放到session中;
2、将session中的xml串取出,并输出到页面,代码如下所示:
<%@ page contentType="text/xml;charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<% out.clear();
String xmlString = (String)session.getAttribute("xmlString");
if(xmlString != null){
out.print(xmlString );
}
%>
3、新建jsp页面,使用dhtmlXTree,核心代码如下:
<script src="../js/dhtmlxcommon.js"></script>
<script src="../js/dhtmlxtree.js"></script>
<script type="text/javascript">
function onNodeTreeSelect(nodeId){
var uri=nodeId;
location=encodeURI(encodeURI("xxx.action?treeId="+uri));
}
function dbTreeinit(){
nodetree2=new dhtmlXTreeObject("treebox_tree","100%","100%",0);
nodetree2.setImagePath("../images/DhtxTree/csh_bluebooks/");
//执行获得xmlString的action,将根据xmlString生成的xml文件加载进来
nodetree2.loadXML("../system/getXMLString.action");
//点击树节点,触发onNodeTreeSelect方法
nodetree2.setOnClickHandler(onNodeTreeSelect);
}
</script>
<body onload="dbTreeinit()" >
<div id="treebox_tree" style="width:199px;overflow: yes;"></div>
</body>
4、在步骤3中已经生成了树型菜单,若要使用该菜单,只需通过<%@ include file="tree.jsp" %>引入即可。
dhtmlXTree支持多种样式,同时支持复选框选择多个树节点,具体使用方法和例子参照上传的文件。
分享到:
相关推荐
dhtmlXTree是一款功能强大的JavaScript组件,它允许开发者在Web应用中创建各种样式的树型菜单。这款组件以其高度自定义的样式和丰富的功能集而备受青睐,尤其适用于构建交互性强、用户体验良好的网页界面。 ### 一...
"超全的JS树形菜单(dhtmlxTree)源代码.doc" 这个标题提到了两个关键概念。首先,"JS树形菜单"是指在JavaScript中实现的一种用户界面元素,通常用于组织和展示层次化的数据。树形菜单允许用户通过节点展开和折叠来...
JS树形菜单是很常用的JS特效代码,常用在管理软件当中,但是一套树形菜单已经不能满足需求,所以如果能有一套比较全面的树形菜单JS特效代码,将会非常方便,下面懒人萱将超全的JS树形菜单(dhtmlxTree)共享出来,...
dhtmlxTree是DHTMLX Suite的一部分,是一个强大的JavaScript组件,它提供了丰富的特性,如分层数据加载、异步加载、拖放、检查框、图标自定义等,适用于大型复杂的数据展示。 9. **dtree.zip**: "dtree"可能是一...
例如,`dhtmlxGrid`是一个流行的JavaScript库,它提供了一个高度灵活和功能强大的表格组件,可以处理大量数据并支持各种操作,如添加、删除、编辑行,以及自定义列和过滤器。 2. **表单元素**: HTML表单是收集...