wtree.js控件树应用案例关键代码

来源：互联网发布：mac air 解压缩软件编辑：程序博客网时间：2024/06/03 17:02

1.从网上下载wtree.js文件放在自己的项目中。这里我在wtree.js里面加入了一个js方法用于获取所有选中节点的叶子节点id.

2.jsp中部分标签：下面是一个自定义带放大镜的输入框。

当点击放大镜时触发showWindow()方法，执行方法如下：

function showWindow(){
   var array = window.showModalDialog("${pageContext.request.contextPath}/scene/createSceneLevelTree.action",null,
       "dialogWidth=400px;dialogHeight=500px;help=no;status=no;center=yes;edge=sunken");
   //得到子类的返回参数写到文本框
   document.getElementById("sceneDesc").value = array.names;//显示到场景描述
   isDown=true;
   return;
}

该方法会在弹出模式对话框时跳转到action，action中的方法处理代码如下：

public String createSceneLevelTree(){
  HttpServletRequest request=ServletActionContext.getRequest();
  //1.获得所有场景分类项
  List<SceneDataItem> sceneDataItem=this.sceneDataItemFactory(SceneUtil.SCENE_ALL_LEVELS);
  //2.遍历集合，添加到树中
  String path=request.getContextPath();
  String sceneLevelsTree = SceneUtil.addSceneDataItemToTree(sceneDataItem,path);
  request.setAttribute("sceneLevelsTree", sceneLevelsTree);
  return "success";
}

上面的方法处理分为两步，第一步是从数据库表中获得所有需要显示在树中的数据，存储该数据的表应该具有如下类似字段：id,pid,value,name。树的层级关系是通过pid，id的父子关系来关联的。第二步创建树的方法我放在了工具类里面，其代码如下：

public static String addSceneDataItemToTree(List<SceneDataItem> sceneDataItem,String path) {
  StringBuffer sb=new StringBuffer(1024);
  sb.append("<script type=\"text/javascript\">");
  sb.append("var d = new dTree('d','"+path+"/js/dtree/checkbox_tree/img/');");
   sb.append("d.config.check=true;");
  sb.append("d.add(0,-1,'','','');");
  for(SceneDataItem dataItem: sceneDataItem){
   sb.append("d.add("+dataItem.getId()+",").append(dataItem.getPid()+",'")
    .append(dataItem.getName()+"',")
    .append("'',")   // 要跳转的url;
    .append("'" + dataItem.getName() + "',")   // 鼠标移到显示的名字
    .append("'',")   // 在哪个地方显示
    .append("'',")   // 节点的图标,节点没有指定图标时使用默认值
    .append("'',")   // 用做节点打开的图标,节点没有指定图标时使用默认值
    .append("''")    // 判断节点是否打开
    .append(");");
  }
  sb.append("document.write(d);");
  sb.append("</script>");
  return sb.toString();
}

只要按如上所示创建，在返回到页面时自然会根据上面存储的父子id形成树。

上面action处理完后返回到显示树的jsp页面，代码不太多我就全部贴出来了：

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>场景类型选择</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">
  <script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery/base/json2.js"></script>
      <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/base/jquery-1.4.2.min.js"></script>
  <script type="text/javascript">
  //父窗口给的值先前选中节点id
  var paramArray = window.dialogArguments;
  //页面加载完毕，初始选中的节点
  function getChecked(){
   d.hideRoot();
   if(paramArray!=null&&paramArray.length>0){
    var nodeIds=paramArray[0].split(",");
    if(nodeIds.length!=0)
     for(var i=0;i<nodeIds.length;i++)
      d.setCheckedWithParent(nodeIds[i]);
   }
  }
  function getReturn(){
   //获取所有选中的节点的标题包括父节点连接起来',' 数组
   var nodeTitles = d.getCheckedTitleWithParent();
   //获取所有叶子节点的id 数组
   var nodeIds =d.getAllCheckedChildId();
   //alert("nodeTitles=="+nodeTitles);
   var idStr="";
   var str="";
   var title="";
   var n=0;
   if(nodeIds.length>0){
    for(; n<nodeIds.length-1; n++){
     var tempStr = nodeTitles[n];
     tempStr=tempStr.trim().substr(1);
     title=title+tempStr+",";
     idStr=idStr+nodeIds[n]+",";
    }
    str+=nodeIds[n];title+=nodeTitles[n].substr(1);
    idStr+=nodeIds[n];
   }
   //返回的节点nodeIds
   //返回数组的标题titleStr
   var titleStr = title;
   var returnArray={};
   returnArray["ids"]=idStr;
   returnArray["names"]=titleStr;
   window.returnValue = returnArray;
   window.close();
  }
  function btnCancle(){
   window.close();
  }
</script>
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/themes/base/css/font.css" />
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/themes/base/css/style.css" />
  <link rel="StyleSheet" href="${pageContext.request.contextPath}/js/dtree/checkbox_tree/dtree.css" type="text/css" />
  <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery/base/jquery-1.4.2.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/dtree/checkbox_tree/wtree.js"></script>

</head>
<body onload="getChecked();">
  <center>
   <div style="position: absolute; top: 10; left: 0">
      
      <input type="hidden" id="isFromTemplate" name="isFromTemplate" value="${isFromTemplate}" />
      <input type="hidden" id="message" name="message" value="${message}">
    <form action="">
     <div style="position: absolute; top: 10px; left: 20px;">
      <div style="display: block; position: absolute; top: 10px; left: 0px; width: 20px;" id="typeDiv">
       <div class="dtree">
        <p style="color:red;">(选择类型请单击)</p>
        <p>
         <input type="button" class="btn" value="全部展开" onclick="javascript: d.openAll();"/> |
         <input type="button" class="btn" value="全部收起" onclick="javascript: d.closeAll();"/>
         <c:if test="${message=='warrant'}">
          <input type="button" class="btn" style="width: 100px" value="所有合同类型" onclick="javascript: d.selectAll();"/>
         </c:if>
        </p>
        <br/>
        ${sceneLevelsTree}
       </div>
       <div style="position:relative;top:10px;width:120px;">
        <input type="button" class="btn" value="确定" onclick="getReturn()"/>  
        <input type="button" class="btn" value="取消" onclick="btnCancle()"/>
       </div>
      </div>
     </div>
    </form>
   </div>
  </center>
</body>
</html>

在弹出的树页面中选择对应选项，点击确定后关闭对话框，同时会吧选择的名称显示到输入框中。

0 0