1.准备工作(下载zTree并添加到项目JS中)

2.HTML代码

<link rel="stylesheet" href="./js/zTree_v3-3.5.24/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="./js/zTree_v3-3.5.24/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="./js/zTree_v3-3.5.24/js/jquery.ztree.excheck.js"></script>

<tr>
  <td style="width: 10%" class="GridHeader" >出差地点<font color="red">*</font>:</td>
  <td width="30%" align="center">
    系统内
    <input name="NWXZ" type="radio" value="1" checked="true" onclick="bg()">
    系统外
    <input name="NWXZ" type="radio" value="2" onclick="bg()">
  </td>
  <td id="fs1" colspan="4" style="display: ">
    <input type="text" name="CCDD1" id="CCDD1" style="width: 100%;height: 100%" class="tb1" value="<%= ??????%>" >
  </td>
  <td id="fs2" colspan="" style="display: none">
  <div id="JGCS" >
    <input type="text" id="JGMC" name="JGMC" value="<%=?????? %>" onclick="onJG()" />
    <input type="hidden" id="JG" name="JG" value="<%=?????? %>" />
    <div id="JGdiv" class="bm" align="left" style="border:#cae4ff 1px solid; position:absolute;overflow:auto; width:200%; height:300px;display: none;">
      <ul id="treeJG" class="ztree" style="width:200px; "></ul>
      </div>
    </div>
  </td>
  <td id="fs3" colspan="3" style="display: none">
    <input type="text" name="CCDD2" id="CCDD2" style="width: 100%;height: 100%" class="tb1" value="<%= ??????%>" >
  </td>
</tr>

//JS

window.onload = function page_init() { 

  if($("#JG").val() == ""){
    //$("#JG").val("371626");
    $("#JGMC").val("--请选择省市县--");
  }

}

//生成弹出层的代码
var xOffset = 0;//向右偏移量
var yOffset = -300;//向下偏移量
$(document).ready(function(){
  //alert($("#JGMC").position().left);
  //alert($("#JGMC").position().top);
  /*
  $("#JGMC").click(function (){
  $("#JGdiv")
    .css("position", "absolute")
    .css("left", $("#JGMC").position().left+xOffset + "px")
    .css("top", $("#JGMC").position().top+25 +"px").show();

  }

);
*/
//判断鼠标在不在弹出层范围内
function checkIn(id){
  var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
  var yy = 30; //偏移量
  var str = "";
  var x=window.event.clientX;
  var y=window.event.clientY;
  y = y+scrollY;
  var obj=$("#"+id)[0];
  //alert((x>obj.offsetLeft)+"----"+(x<(obj.offsetLeft+obj.clientWidth))+"-2-"+(y>(obj.offsetTop-yy))+"-3-4-"+(y<(obj.offsetTop+obj.clientHeight-obj.scrollTop))+"-5-"+(obj.offsetTop+obj.clientHeight-obj.scrollTop));
  if(x>obj.offsetLeft&&x<(obj.offsetLeft+obj.clientWidth)&&y>(obj.offsetTop-yy)&&y<(obj.offsetTop+obj.clientHeight-obj.scrollTop)){
    //alert(obj.value);
    //if("" == obj || null == obj || undefined == obj){
    return true;
    }else{
      return false;
    }
  }
  //点击body关闭弹出层
  /*
  $(document).click(function(){
    alert("1-----5");
    var isJG = checkIn("JGCS");
    alert(isJG);
    if(!isJG){
      $("#JGdiv").hide();
    }
  });
  */
});

function onJG(){
  document.getElementById("JGdiv").style.display = document.getElementById("JGdiv").style.display == "none" ? "" : "none";
}

function setjgvalue(id,name){
  $("#JG").val(id);
  $("#JGMC").val(name);
}
//页面初始化籍贯
$(document).ready(function(){
  //树形菜单配置
  var setting = {
    data: {
      simpleData: {
        enable: true
      }
    },
    async: {
      enable: true,
      url:"<%= path%>/ajax/getitems.jsp?DMZL=JG",
      autoParam:["id", "name", "pId"],
      otherParam:{"otherParam":"zTreeAsyncTest"},
      dataFilter: filter
    },
    callback: {
      onCollapse:onjgExpand ,
      nExpand: onjgExpand
    }
  };
  $.fn.zTree.init($("#treeJG"), setting, <%= jg%>);
});
function onjgExpand(){
  $("#JGdiv").show();
}
function filter(treeId, parentNode, childNodes) {
  if (!childNodes) return null;
  var nodes = childNodes[0];
  for (var i=0, l=nodes.length; i<l; i++) {
    childNodes[0][i].name = nodes[i].name.replace('','');
  }
  return childNodes[0];
}
//页面初始话
function bg(){
  var val = $("input[name='NWXZ']:checked").val();
  //alert(val);
  if(val == 1){
    document.getElementById("fs1").style.display = "";
    document.getElementById("fs2").style.display = "none";
    document.getElementById("fs3").style.display = "none";
  }else{
    document.getElementById("fs1").style.display = "none";
    document.getElementById("fs2").style.display = "";
    document.getElementById("fs3").style.display = "";
  }
}

4.java代码

  注:数据库中添加存储省市县信息的表  

  //籍贯(省市县)
  List<Map> csdlist = new ArrayList();
  JSONArray csd = new JSONArray();
  List<Map> jglist = new ArrayList();
  JSONArray jg = new JSONArray();

  StringBuffer csdsql = new StringBuffer();
  csdsql.append(" SELECT CODE AS BH,DESCRIPTION AS MC,PPTR AS SJBH, NVL((SELECT 'true' FROM V_BM_XZQH D WHERE D.pptr = t.code AND ROWNUM = 1), 'false') ISPARENT FROM V_BM_XZQH T ");
  csdsql.append(" where PPTR = 'AG' ");
  csdsql.append(" ORDER BY 1 ");
  //csdsql.append(" START WITH PPTR = 'AG' ");
  //csdsql.append(" CONNECT BY PRIOR CODE = PPTR ");
  csdlist = dataManipulation.list(csdsql.toString(),DBA.getConn(),new String []{},true);
  //System.out.println("csdsql.toString():"+csdsql.toString());
  //籍贯(省市县)
  for(Map map : csdlist){
    JSONObject object = new JSONObject();
    object.accumulate("id", map.get("BH"));
    object.accumulate("pId",map.get("SJBH"));
    object.accumulate("name", map.get("MC"));
    object.accumulate("click", "setjgvalue('"+map.get("BH")+"','"+map.get("MC")+"');");
    object.accumulate("isParent", map.get("ISPARENT"));
    object.accumulate("iconClose", "./js/zTree_v3-3.5.24/css/zTreeStyle/img/diy/1_close.png");
    if(XDataConvert.TryToString(map.get("ISPARENT")).equals("true")){
      object.accumulate("iconOpen", "./js/zTree_v3-3.5.24/css/zTreeStyle/img/diy/1_open.png");
    }
    jg.add(object);
  }

5.效果图

Z_Tree的使用案例(出差地点的演示)的更多相关文章

  1. 关于csdn博客中案例效果的动态演示

    在曾经一篇博文中,网友评论说要是案例效果是动态演示的就好了,我认为说的非常是有道理.由于一个简单的截图不能非常好的展示案例效果.要是有一张gif图能动态的播放案例效果就再好只是了.在这里提供一个小软件 ...

  2. [转载]基于UML的需求分析和系统设计(完整案例和UML图形演示)

    小序: 从学生时代就接触到UML,几年的工作中也没少使用,各种图形的概念.图形的元素和属性,以及图形的画法都不能说不熟悉.但是怎样在实际中有效地使用UML使之发挥应有的作用,怎样捕捉用户心中的需求并转 ...

  3. BPM配置故事之案例14-数据字典与数据联动

    小明遇到了点麻烦,他昨天又收到了行政主管发来的邮件,要求把出差申请单改由H3 BPM进行,表单如下 行政主管的出差申请表 小明对表单进行了调整,设计出了一份适合在系统中使用的表单,但在"出差 ...

  4. 【FLUENT案例】03:冲蚀

    1 引子2 问题描述3 模型准备4网格5模型设置6 材料设置7 设定注入器8 修改材料9 Cell zone Conditions设置10 边界条件设置10.1 inlet入口设置10.2 出口设置1 ...

  5. D3js初探及数据可视化案例设计实战

    摘要:本文以本人目前所做项目为基础,从设计的角度探讨数据可视化的设计的方法.过程和结果,起抛砖引玉之效.在技术方案上,我们采用通用web架构和d3js作为主要技术手段:考虑到项目需求,这里所做的可视化 ...

  6. 北京U3D外包团队 UE4红军抗战案例 Unity3D红军抗战案例 UE4下载和安装虚幻4游戏引擎

    刚完整UE4红军抗战案例 Unity3D红军抗战案例,有在线演示(版权关系不方便发图),有UE4或Unity项目定制外包开发的欢迎联系我们 进入虚幻4的官方主页(https://www.unreale ...

  7. [css]演示:纯CSS实现的右侧底部简洁悬浮效果

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...

  8. Java 基础案例

    1.变量及基本数据类型 案例1:变量声明及赋值 //1.变量的声明 int a; //声明一个整型的变量a int b,c,d; //声明三个整型变量b,c,d //2.变量的初始化 int a = ...

  9. 基于Struts2+MySQL的多表出差明细表单

    下载地址:http://download.csdn.net/detail/qq_33599520/9790629 项目结构: UserAction package com.mstf.action; i ...

随机推荐

  1. “全栈2019”Java多线程第三章:创建多线程之实现Runnable接口

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  2. JSP(汇聚页)

    JSP(汇聚页) ------------------------------------------------------------------------------------------- ...

  3. 2018国庆YALI集训游记

    想了想,像之前那样简略地叙述题意和做法,根本没讲清楚,没有任何意义,还不如写写自己的感受. 感觉YALI真的是一所挺不错的学校吧.总是能有一机房的julao轮番吊打你,总是能有集训队的奆佬来给你出dl ...

  4. CVE-2017-11882漏洞复现

    作者:zero 漏洞信息:CVE-2017-11882 2017年11月14日,微软发布了11月份的安全补丁更新,其中比较引人关注的莫过于悄然修复了潜伏17年之久的Office远程代码执行漏洞(CVE ...

  5. Java中类变量和实例变量的初始化

    1. 类变量和实例变量 类变量即类成员变量中的静态变量,它们可以通过类名来直接访问. 实例变量是类成员变量中的非静态变量,只有在实例化对象之后通过对象来访问. 2. 空间分配的时间不同 类变量是在类加 ...

  6. leetcode 198 打家劫舍 Python 动态规划

    打家劫舍 你是一个专业的小偷,计划偷窃沿街的房屋.每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警. 给定 ...

  7. Linux C 重定向简单范例

    //前言:我们知道printf()会将信息输出到stdout流,然后展示到屏幕上. //那么我们所实现的简单的重定向就可以将stdout指向一个文件,然后读写,这样就达到了重定向的目的. //code ...

  8. HEOI 十二省联考退役记

    Day -1 简要的说了些注意事项 一整天都在刷树套树的水题 退役的感觉近了 Day 0 早上收拾好东西去了火车站之后 火车站居然还没有开门 等了半天 我们是从衡水到德州再到秦皇岛 到了德州之后 去车 ...

  9. 2016级算法期末模拟练习赛-A.wuli51和京导的毕业旅行

    1063 wuli51和京导的毕业旅行 思路 中等题,二分+贪心. 简化题意,将m+1个数字分成n份,ans为这n段中每段数字和的最大值,求ans最小值及其方案. 对于这种求最小的最大值,最常用的方法 ...

  10. mysql启动不起来

    在刚编译安装完成mysql,启动mysql时报了下面错误: /etc/init.d/mysqld start Starting MySQL... ERROR! The server quit with ...