您的位置：首页 > Web前端 > JavaScript

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

2016-12-29 00:10 495 查看

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

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

<div class="input_search" style="width:90%;">

      <input onmouseover="this.title=this.value" type="text" id="sceneDesc"

          name="scene.sceneDesc"

          style="width:87%;_width:87%;" class="search_input"

          value="${scene.sceneDesc}" />

      <a onclick="" href="javascript:void(0)"><img id="Magnifier1" title="搜索" class="input_pic"

       src="${pageContext.request.contextPath}/themes/base/images/magnifier.gif" width="18" height="19"

      onmousemove="this.src='${pageContext.request.contextPath}/themes/base/images/magnifier.gif'"

      onmouseout="this.src='${pageContext.request.contextPath}/themes/base/images/magnifier.gif'"

      onclick="showWindow()" /></a>

</div>

当点击放大镜时触发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&¶mArray.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
;

     tempStr=tempStr.trim().substr(1);

     title=title+tempStr+",";

     idStr=idStr+nodeIds
+",";

    }

    str+=nodeIds
;title+=nodeTitles
.substr(1);

    idStr+=nodeIds
;

   }

   //返回的节点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>

4000
  <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>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js wtree.js js树案例

相关文章推荐

新的分享

章节导航