一、引入ztree的头文件

<!-- 引入ztree/-->
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/ztree/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/ztree/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/ztree/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/ztree/js/jquery.ztree.exhide-3.5.js"></script>

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/lib/ztree/css/zTreeStyle/zTreeStyle.css" />

二、正文中ZTree出现的地方写入

<div class="ibox-content" style="height:700px;">
  <ul id="tree1" class="ztree"></ul>   //id="tree1"是ZTree的标识 ,class="ztree"是引入ztree的类
</div>

三、js实现树的数据填充

$(function(){

  var setting = {
      data: {
  simpleData: {
  enable: true,
  idKey:"id",
  idPKey:"pId",
         }
 },
  async: {
  enable: true, //开启异步加载
  url:baseCtx+"/media/getOrgZTree.action", //设置获取异步动态加载的数据
  dataType: "text",
  autoParam:["id"],
  otherParam: { },
  dataFilter: filter
},

callback: {
  onClick: onClick  //回调函数为单击操作
}
};
//滤波
function filter(treeId, parentNode, childNodes) {
  var array = childNodes;
  return array;
}


//单击操作---------------------------------------------------------------------------------------------
function onClick(event, treeId, treeNode, clickFlag) {
  if (treeNode.isParent) {
  var zTree = $.fn.zTree.getZTreeObj(treeId);
  //扩展所有子节点
  zTree.expandNode(treeNode);
}
  //单击后在标题处 重新拼接html,显示为***部门的任务信息概览
  document.getElementById('dg_h').innerHTML = '<h5>['+treeNode.name+']任务信息概览</h5>';

//单击后的操作
  onClickAjax(treeNode.name);
}

//初始化操作---严格按照头文件加载,否则会出现init函数没有定义这种情况-------------------------------------------------------------------------------------
function init(){
  $.post(baseCtx+"/media/getOrgZTree.action",{id:3},function(data){  //id=3是初始输入,确立根节点的id=3
  var result= $.parseJSON(data);
  rw_tree=$.fn.zTree.init($("#tree1"),setting, result); //将得到的数据解析并填充到ZTree上

});
}
init();
});

/**
* =====点击节点的操作来获取相应的信息的后台请求操作=======================
* =============================
* */
function onClickAjax(treeNodeName) {


  $.ajax({
  url:baseCtx+"/media/OrgTaskAssess.action",
  data:{ ORG_NAME:treeNodeName}, //向后台传递的数据是名字 也可以是id 可以根据实际情况来定
  type : 'post',
  async : false,
  dataType : "json", //返回的数据类型是json
  success: function(data){
  //alert('got it!');
  $('#dg').datagrid('loadData', data);//回调成功后重新加载表格的数据 ,前提是表格的字段已经确定
},
});

}

四、后台web请求的写法

1.action的写法

package com.*****.media.action;

import javax.annotation.Resource;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.apache.struts2.convention.annotation.Action;
//bpo
import com.*****.media.bpo.OrgZTreeBPO;
import com.*****.common.web.BaseAction;

public class OrgZTreeAction extends BaseAction{

private static final long serialVersionUID = 1L;

private String id;
private String name;
private String pid;

/**
* 利用Ztree插件获取动态树-----------------------------------------------
* @return
*/
@Action(value = "getOrgZTree")

public String getOrgZTree(){


List<Map<String, Object>> resultList = new ArrayList<Map<String, Object>>();

  //第一级数据(根节点)
  Map<String, Object> orgMap = new HashMap<String, Object>();
  orgMap.put("isParent", true);//设置根节点为父节点
  orgMap.put("open", true); //根节点展开
  orgMap.put("id", id);//根节点的ID
  orgMap.put("name", "TEST"); //根节点的名字
  resultList.add(orgMap); //列表中先添加第一级的数据

  //第二级数据(下级)
  List<Map<String, Object>> OrgresultList1 = new ArrayList<Map<String, Object>>();
  OrgresultList1 = orgZTreeBPO.getOrgList(orgMap);//根据第一级节点的数据获取下一级的数据
  //判断列表是否为空
  if(null != OrgresultList1 && OrgresultList1.size() !=0)
  {
    for (Map<String, Object> map1 : OrgresultList1) { //将下一级别的数据用循环读取
    resultList.add(map1);

    //获取第三级数据
    List<Map<String, Object>> OrgresultList2 = new ArrayList<Map<String, Object>>();
    OrgresultList2 = orgZTreeBPO.getOrgList(map1);
    if(null != OrgresultList2 && OrgresultList2.size() !=0)
      {
        for (Map<String, Object> map2 : OrgresultList2) {
        resultList.add(map2);

        //获取第四级数据
        List<Map<String, Object>> OrgresultList3 = new ArrayList<Map<String, Object>>();
        OrgresultList2 = orgZTreeBPO.getOrgList(map2);
        if(null != OrgresultList3 && OrgresultList3.size() !=0)
          {
            for (Map<String, Object> map3 : OrgresultList2) {
            resultList.add(map3);

             }
          }
        }
      }
    }
}

outputJson(resultList);//输出数据库中获得的数据(数据库中的存储也是以树的形式保存的)
System.out.println(resultList);
return NONE;
}

//字段的get set方法  必须有,不能忽略掉

public String getId() {
return id;
}

public void setId(String id) {
this.id = id;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getPid() {
return pid;
}

public void setPid(String pid) {
this.pid = pid;
}

2.xml的写法

<!--Ztree获取部门列表-->
<resultMap type="map" id="RwgzInfo">
  <result property="name" column="ORG_NAME" />  //column 列是数据库中的存储字段,property是Java实体的字段名
  <result property="id" column="ORG_ID" />
  <result property="pId" column="ORG_HIGHER_ID" />
</resultMap>

<select id="getOrgList" parameterType="map" resultMap="RwgzInfo" >
  select ORG_ID,ORG_NAME,ORG_HIGHER_ID from yhgl.wpy_org_test
<where>
  <if test="id!=null and id!=''">
    and ORG_HIGHER_ID = #{id}
  </if>
</where>
</select>

Ztree的简单使用和后台交互的写法(一)的更多相关文章

  1. Ztree的简单使用和后台交互的写法(二)

    针对Ztree的简单使用和后台交互的写法(一)中的树进行改进 1.增加节点的权限 由页面的当前用户,决定树的根节点 然后动态获取树的详细节点: 初始化函数为: function init(){ //初 ...

  2. ajax简单后台交互

    ajax简单后台交互 1,扯淡 单身的生活,大部分时间享受自由,小部分时间忍受寂寞. 生活有时候,其实蛮苦涩,让人难以下咽.那些用岁月积累起来的苦闷,无处宣泄,在自己的脑海里蔓延成一片片荆棘,让你每每 ...

  3. 简单web网页与SSM后台交互

    简单web网页与SSM后台交互 情况说明 如今,已经搭建好SSM后台开发环境,并且可以经由postman工具测试成功.现在尝试写出web前端网页,通过实现简单的提交.注册.查询功能来加深对前后端数据传 ...

  4. Extjs 4.2 Grid增删改及后台交互(Java)

    上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录.苦于抽不出时间,一直拖到现在.不得不说,Extjs确实很强大,新版的Neptun ...

  5. 通过ajax前端后台交互/登录页和注册页前端后台交互详解/前端后台交互基础应用/几个后台函数的基础应用/php文件函数基础应用/php字符传函数基础应用/php数组函数基础应用

      前  言  PHP     学习了好久的PHP,今天做一个可以后台交互的登录页和注册页,没做什么判断,简单的了解一下. 具体的内容分析如下: ① PHP中的数据传输-->>由注册页传输 ...

  6. PHP中使用 $_GET 与$_POST 实现简单的前后台数据传输交互功能

    在之前的学习过程中我们接触过前后台数据请求交互的方法有表单提交.AJAX请求以及Angularjs中的$http,今天我们尝试在PHP中使用 $_GET 与$_POST 实现简单的前后台数据传输交互功 ...

  7. 如何用CropBox实现头像裁剪并与java后台交互

    如何用CropBox实现头像裁剪并与java后台交互 参考网站:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob 参考: http://blo ...

  8. js与后台交互详述(入门篇)

    很多新手前端在初期学习的时候往往把注意力放在如何编写页面,如何编写效果上,群里有个朋友问我js是如何与后台交互的,我简单的说一下. 首先需要知道两个东西,一个是客户端,一个是服务器,客户端其实就是我们 ...

  9. 项目中简单使用ztree,简单数据。

    由于公司架构较旧,使用的jdk版本为1.4,页面上也没有el表达式. 加入 js 文件 <% String context = request.getContextPath(); %> & ...

随机推荐

  1. 4-pwd 打印当前工作目录

    pwd print name of current/working directory 打印当前工作目录 [语法]: pwd [选项] [参数] [功能介绍] pwd命令以绝对路径的方式显示用户当前工 ...

  2. Python基础-函数篇

    本节内容 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 嵌套函数 4.递归 5.匿名函数 6.函数式编程介绍 7.高阶函数 8.内置函数  函数与函数式编程 1.面向对象: 华山派-- ...

  3. git flow的使用

    简介 Gitflow工作流程围绕项目发布定义了严格的分支模型.尽管它比Feature Branch Workflow更复杂一些,但它也为管理更大规模的项目提供了坚实的框架. 与Feature Bran ...

  4. 在无修改权限的情况下修改文件hosts中的内容

    今天遇到了一个问题,本来希望修改hosts中的内容,但保存时被告知无权限,网上搜索有很多方法都无效,最后搜到一个简单的方法:将hosts文件复制到桌面上,修改,然后覆盖原来位置的hosts文件即可!

  5. Java垃圾收集算法介绍

    垃圾回收器GC(Garbage Collection) 一.引用计数算法(Reference Counting) 介绍:给对象添加一个引用计数器,每当一个地方引用它时,数据器加1:当引用失效时,计数器 ...

  6. iOS开发中的错误整理,iOS9之后的UIWindow(TopWindow)以及UIWindow与statusBar的关系

    iOS9之后的UIWindow的问题(TopWindow),以及UIWindow与statusBar之间的联系 1.出现的问题 iOS9之后UIWindow必须要指定一个根控制器,不然会报错!iOS9 ...

  7. hdu3410 单调队列

    Passing the Message Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  8. Mybatis 自动生成代码

    准备条件: 将下面的文件放入同一目录下 操作步骤: 1/ 在 generatorConfig.xml 中配置相关的参数,与需要被自动生成的表 也可以 执行项目中的MybatisConfigAutoGe ...

  9. 在编译向该请求提供服务所需资源的过程中出现错误。请检查下列特定错误详细信息并适当地修改源代码。 编译器错误消息: CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\root\41c191fd\ff9345c5\App_Web_login.cshtml.65793277

    本地开发环境没问题,但是发布到服务器出现问题或则直接在IIS上修改东西就给我抛出以下错误: 未能写入输出文件"c:\Windows\Microsoft.NET\Framework64 \v4 ...

  10. C++之再续前缘(一)——C++基础(与C语言的差异)(下)

    1.void型指针 void本身是一种数据类型,通常表示无值,不能声明void类型的变量,但是可以声明void类型的指针, void*类型的指针表示不确定的类型,是一种通用型的指针,也就是说任何类型的 ...