Z_Tree的使用案例(出差地点的演示)
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的使用案例(出差地点的演示)的更多相关文章
- 关于csdn博客中案例效果的动态演示
在曾经一篇博文中,网友评论说要是案例效果是动态演示的就好了,我认为说的非常是有道理.由于一个简单的截图不能非常好的展示案例效果.要是有一张gif图能动态的播放案例效果就再好只是了.在这里提供一个小软件 ...
- [转载]基于UML的需求分析和系统设计(完整案例和UML图形演示)
小序: 从学生时代就接触到UML,几年的工作中也没少使用,各种图形的概念.图形的元素和属性,以及图形的画法都不能说不熟悉.但是怎样在实际中有效地使用UML使之发挥应有的作用,怎样捕捉用户心中的需求并转 ...
- BPM配置故事之案例14-数据字典与数据联动
小明遇到了点麻烦,他昨天又收到了行政主管发来的邮件,要求把出差申请单改由H3 BPM进行,表单如下 行政主管的出差申请表 小明对表单进行了调整,设计出了一份适合在系统中使用的表单,但在"出差 ...
- 【FLUENT案例】03:冲蚀
1 引子2 问题描述3 模型准备4网格5模型设置6 材料设置7 设定注入器8 修改材料9 Cell zone Conditions设置10 边界条件设置10.1 inlet入口设置10.2 出口设置1 ...
- D3js初探及数据可视化案例设计实战
摘要:本文以本人目前所做项目为基础,从设计的角度探讨数据可视化的设计的方法.过程和结果,起抛砖引玉之效.在技术方案上,我们采用通用web架构和d3js作为主要技术手段:考虑到项目需求,这里所做的可视化 ...
- 北京U3D外包团队 UE4红军抗战案例 Unity3D红军抗战案例 UE4下载和安装虚幻4游戏引擎
刚完整UE4红军抗战案例 Unity3D红军抗战案例,有在线演示(版权关系不方便发图),有UE4或Unity项目定制外包开发的欢迎联系我们 进入虚幻4的官方主页(https://www.unreale ...
- [css]演示:纯CSS实现的右侧底部简洁悬浮效果
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
- Java 基础案例
1.变量及基本数据类型 案例1:变量声明及赋值 //1.变量的声明 int a; //声明一个整型的变量a int b,c,d; //声明三个整型变量b,c,d //2.变量的初始化 int a = ...
- 基于Struts2+MySQL的多表出差明细表单
下载地址:http://download.csdn.net/detail/qq_33599520/9790629 项目结构: UserAction package com.mstf.action; i ...
随机推荐
- php—Smarty-缓存2(26)
一个页面中,有些数据缓存,有些数据不缓存,就是局部缓存 l $smarty->assign(“var”, “value”, true) 第三个参数:表示是否不缓存 l {$var nocac ...
- 学习笔记|JSP教程|菜鸟教程
学习笔记|JSP教程|菜鸟教程 ------------------------------------------------------------------------------------ ...
- Code Chef February Challenge 2019题解
传送门 \(HMAPPY2\) 咕 话说这题居然卡\(scanf\)的么??? int T;cin>>T; while(T--){ cin>>n>>a>> ...
- python有哪些比较隐藏的知识点?
一.复用小整数以及小字符串 在Python语言中,设计者在优化Python语言时,为了提高Python的运行效率,所以就将一些小整数保存在系统表,没有释放回收(正常情况下,当Python中一个对象没有 ...
- 永久激活navicat_premium12.0,支持win32和64位
1.下载软件以及注册机 链接:https://pan.baidu.com/s/1NGc6YLsgMQRQYEwnGSU16Q 提取码:guno 2.根据自己的电脑位数安装对应的软件,傻瓜式安全(注 ...
- c#-MVC基础操作-数据的展示及增删改、登录页面及状态保持
一.数据展示 1.View代码: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynam ...
- Hibernate 查询数据库中的数据
1.Criteria介绍 Criteria与Session绑定,其生命周期跟随着Session结束而结束,使用Criteria时进行查询时,每次都要于执行时期动态建立物件,并加入各种查询条件,随着Se ...
- 并发编程>>概念准备(一)
工于其善,必先利器 1.并发和并行的区别 并行:同一时间点执行多个任务(CPU多核或多个CPU同时执行多个任务) 并发:同一时间段内行多个任务(单核同时执行多个任务) 2.同步和异步的区别 同步:执行 ...
- 浅谈js中的垃圾两种回收机制
一.标记清除 标记清除的主要思想是先建立各个对象的关联,然后从根节点出发,使用广度优先搜索依次标记所有对象,那些不能被标记的对象就应该作为垃圾回收. 这种方式的主要缺点就是如果某些对象被清理后,内存是 ...
- TortoiseGit学习系列之TortoiseGit基本操作拉取项目(图文详解)
前面博客 TortoiseGit学习系列之TortoiseGit基本操作克隆项目(图文详解) TortoiseGit学习系列之TortoiseGit基本操作修改提交项目(图文详解) TortoiseG ...