dhtmlxtree 简单例子后台springmvc实现

最新推荐文章于 2016-01-15 11:20:45 发布

donglin0325

最新推荐文章于 2016-01-15 11:20:45 发布

阅读量1.5k

点赞数

分类专栏： java 文章标签： dhtmlxtree

本文链接：https://blog.csdn.net/bahaidong/article/details/44921027

版权

java 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

1、下载dhtmlxtree

网上自己搜

2、jsp页面如下
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ include file="../public.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head><title>xxxxxxx</title>
<link rel="stylesheet" type="text/css" href="<c:url value="/js/dhtmlxTree/codebase/skins/dhtmlxtree_dhx_skyblue.css" />">
<link rel="stylesheet" type="text/css" href="<c:url value="/js/dhtmlxTree/codebase/skins/dhtmlxtree_dhx_terrace.css" />">
<link rel="stylesheet" type="text/css" href="<c:url value="/js/dhtmlxTree/codebase/skins/dhtmlxtree_dhx_web.css" />">
<script type="text/javascript" src="<c:url value="/js/dhtmlxTree/codebase/dhtmlxtree.js" />"></script>
<script type="text/javascript" src="<c:url value="/js/dhtmlxTree/codebase/connector.js" />"></script>
<script type="text/javascript" src="<c:url value="/js/dhtmlxTree/codebase/dhtmlxcommon.js" />"></script>
<script type="text/javascript" src="<c:url value="/js/dhtmlxTree/codebase/dhtmlxcontainer.js" />"></script>
<script type="text/javascript" src="<c:url value="/js/dhtmlxTree/codebase/dhtmlxcore.js" />"></script>
<script type="text/javascript" src="<c:url value="/js/dhtmlxTree/codebase/dhtmlxdataprocessor.js" />"></script>
<script type="text/javascript" src="<c:url value="/js/dhtmlxTree/codebase/ext/dhtmlxtree_start.js" />"></script>
<script type="text/javascript">

</script>

</head>
<body>

   <div style="width:600px;" class="easyDialog_wrapper" id="addDiv" >
       <form method="post" id="addForm" action="<%=prefix %>dimension.do?method=save" οnsubmit="return checkInput('addForm')">
       <table>
           <tr>
               <td><font color="red">*</font>根节点：</td>

               <td id="treeboxbox_td">
                   <div id="treeboxbox_tree" style="height: 100%; width: 100%; overflow: auto; display: block;" οncοntextmenu="return false;"></div>
                   <input type="hidden" id="idGather" name="idGather" oper="new" rel="require" relName="根节点" pro="chi" maxlength="100"></input>
               </td>
           </tr>
           <tr>
               <td>选中的节点</td>
               <td><a href="javascript:void(0);" onClick="alert(tree.getAllChecked());">Get list of checked</a></td>
           </tr>
           <tr>
               <td><input type="submit" value="提交" id="submit"/></td>

               <td align="right"><input type="button" id="colseBtn" value="关闭" /></td>
           </tr>
       </table>

   </form>
   </div>

   <script type="text/javascript">

       $("#initRedis").click(function(){
           window.location.href='<%=prefix %>dimension.do?method=initRedis';
       });

       //创建树形组件对象
       tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
       // 设置组件的皮肤（样式）
       tree.setSkin('dhx_skyblue');
       tree.setImagePath("<c:url value="/js/dhtmlxTree/codebase/imgs/dhxtree_web/" />");
       // 使用复选框树形组件（为可选两行代码）
       //tree.enableCheckBoxes(1); // 1：表示加入checkbox，0：表示取消checkbox
       //tree.enableRadioButtons('0' ,true)//db是节点ID true则设置成单选框
       //tree.enableThreeStateCheckboxes(false);// 是否级联选中
       //设置单选模式
       tree.enableRadioButtons(true);
       tree.enableSingleRadioMode(true);
       //tree.enableSingleRadioMode(false);
       // 加载数据，这里写入我们的action访问路径即可
       //tree.loadXML("<c:url value="/dimension.do?method=buildTree" />");
       tree.loadXML("<%=prefix %>dimension.do?method=buildTree");
       //tree.setXMLAutoLoading("<%=prefix %>dimension.do?method=buildTree");

       $("#submit").click(function(){
           document.getElementById("idGather").value = tree.getAllChecked();
       });

</body>
</html>

3、后台类如下

构建树的具体类

package com.xinhuanet.action;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;

import com.xinhuanet.model.Dimension;
import com.xinhuanet.service.DimensionService;

@Controller
public class DimensionTreeBuilder {

   private @Autowired DimensionService dimensionService;
   private StringBuilder treeString = new StringBuilder(128);


    /**
     * 构建树
     * @return
     */
    public String build(Dimension root) {
        //xml的表头
        treeString.append("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
        treeString.append("<tree id=\"0\">");
        //调用构建子节点的函数
        buildNode(root);
        treeString.append("</tree>");

        //将构建好的树，转换为字符串return,方便action的输出
        return treeString.toString();
    }

    /**
     * 构建树形节点的内容
     */
    private void buildNode(Dimension dimension) {
        //注意拼接字符串一些特殊符号的处理
        treeString.append("<item text=\"");
        treeString.append(dimension.getName());
        treeString.append("\" id=\"");
        treeString.append(dimension.getId() + "_" + dimension.getParentId() + "_" + dimension.getLevelId());
        treeString.append("\">");

        //查看此节点的子节点
        List<Dimension> list = null;
       try {
           list = dimensionService.selectParentId(dimension.getId());
       } catch (Exception e) {
           e.printStackTrace();
       }
        //如果有子节点，进行递归调用，调用自己这个函数
        for (Dimension d : list) {
            buildNode(d);
        }

        treeString.append("</item>");
    }

    //删除该节点及子节点
    public void deleteNode(Dimension root) {
       try {
           dimensionService.delete(root.getId());
           //查看此节点的子节点
            List<Dimension> list = null;
           try {
               list = dimensionService.selectParentId(root.getId());
           } catch (Exception e) {
               e.printStackTrace();
           }
            //如果有子节点，进行递归调用，调用自己这个函数
            for (Dimension d : list) {
               deleteNode(d);
            }
       } catch (Exception e) {
           e.printStackTrace();
       }

    }

   public StringBuilder getTreeString() {
       return treeString;
   }

   public void clear() {
       treeString.setLength(0);
   }
}

调用类

package com.xinhuanet.action;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.xinhuanet.model.Dimension;
import com.xinhuanet.model.NodeConfig;
import com.xinhuanet.model.PcQuota;
import com.xinhuanet.model.SiteConfig;
import com.xinhuanet.service.DimensionService;
import com.xinhuanet.service.NodeConfigService;
import com.xinhuanet.service.PcQuotaService;
import com.xinhuanet.service.SiteConfigService;
import com.xinhuanet.util.JSONHelper;

@Controller
@RequestMapping("/dimension")
public class DimensionAction extends AbstractAction {
   private Logger logger = Logger.getLogger(DimensionAction.class);

   private @Autowired DimensionService dimensionService;
   private @Autowired DimensionTreeBuilder treeBuilder;
   private @Autowired PcQuotaService pcQuotaService;
   private @Autowired SiteConfigService siteService;
   private @Autowired NodeConfigService nodeService;

   @RequestMapping(params = "method=buildTree")
   @ResponseBody
   public String buildTree(HttpServletRequest request,
           HttpServletResponse response, ModelMap modelMap) {

       List<Dimension> root = null;
       try {
           root = dimensionService.selectParentId(0);
       } catch (Exception e1) {
           e1.printStackTrace();
       }
       String tree = treeBuilder.build(root.get(0));
       treeBuilder.clear();
       //System.out.println(tree);

       return tree;
   }

}

4、树的效果