1 dtree是一款开源的树形的js。用于输出树形菜单。主要是这两个文件:dtree.js和dtree.css
2 现在jsp中引入css和js。
如:<link rel="stylesheet" type="text/css" href="<%=basePath %>css/dtree.css"/>
<script type="text/javascript" language="javascript" src="<%=basePath %>js/dtree.js"></script>
这里注意:dtree的所需的img的文件,都在WebRoot下建立一个img文件夹。然后将dtree的图片文件都放在这里。因为系统会默认调用WebRoot下的img文件夹中的图片。这点要记住。
3 在jsp中使用dtree。首先记住不要在onload方法中使用。根节点的父节点是-1
如:<script type="text/javascript">
d12=new dTree('d12');//!!!这点要记住 d12没有定义类型。是因为dTree的参数名需要和对象名保持一致。这两个名字要一致不然会报错。名字可以随便起。只要保持一致即可。
d12.add(0,-1,"0");//使用add方法。第一个参数为节点id。第二个参数为父节点(根节点的父节点是-1)。第三个参数为节点的名称,还有第四个参数为节点的url。还有第五个参数为节点的title。第六个参数为目标的frame。
d12.add(10,0,"10");
d12.add(11,10,"11","qq");
d12.add(12,10,"12","ddd");
d12.add(20,0,"20");
document.write(d12);//通过document.write()将显示出来。
</script>
document.write方法是将内容显示在页面上。未来的规划是将从后台来拼接dtree的数据。然后再前台显示出来(菜单)
完整的例子:webroot文件夹下有js、css、img。分别将dtree的文件放入其中。
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="<%=basePath %>css/dtree.css"/>
<script type="text/javascript" language="javascript" src="<%=basePath %>js/dtree.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
d=new dTree('d');
d.add(0,-1,"0");
d.add(10,0,"10");
d.add(11,10,"11","qq");
d.add(12,10,"12","ddd");
d.add(20,0,"20");
document.write(d);
</script>
</html>
2 现在jsp中引入css和js。
如:<link rel="stylesheet" type="text/css" href="<%=basePath %>css/dtree.css"/>
<script type="text/javascript" language="javascript" src="<%=basePath %>js/dtree.js"></script>
这里注意:dtree的所需的img的文件,都在WebRoot下建立一个img文件夹。然后将dtree的图片文件都放在这里。因为系统会默认调用WebRoot下的img文件夹中的图片。这点要记住。
3 在jsp中使用dtree。首先记住不要在onload方法中使用。根节点的父节点是-1
如:<script type="text/javascript">
d12=new dTree('d12');//!!!这点要记住 d12没有定义类型。是因为dTree的参数名需要和对象名保持一致。这两个名字要一致不然会报错。名字可以随便起。只要保持一致即可。
d12.add(0,-1,"0");//使用add方法。第一个参数为节点id。第二个参数为父节点(根节点的父节点是-1)。第三个参数为节点的名称,还有第四个参数为节点的url。还有第五个参数为节点的title。第六个参数为目标的frame。
d12.add(10,0,"10");
d12.add(11,10,"11","qq");
d12.add(12,10,"12","ddd");
d12.add(20,0,"20");
document.write(d12);//通过document.write()将显示出来。
</script>
document.write方法是将内容显示在页面上。未来的规划是将从后台来拼接dtree的数据。然后再前台显示出来(菜单)
完整的例子:webroot文件夹下有js、css、img。分别将dtree的文件放入其中。
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="<%=basePath %>css/dtree.css"/>
<script type="text/javascript" language="javascript" src="<%=basePath %>js/dtree.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
d=new dTree('d');
d.add(0,-1,"0");
d.add(10,0,"10");
d.add(11,10,"11","qq");
d.add(12,10,"12","ddd");
d.add(20,0,"20");
document.write(d);
</script>
</html>