Ztree的简单使用和后台交互的写法(一)
一、引入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的简单使用和后台交互的写法(一)的更多相关文章
- Ztree的简单使用和后台交互的写法(二)
针对Ztree的简单使用和后台交互的写法(一)中的树进行改进 1.增加节点的权限 由页面的当前用户,决定树的根节点 然后动态获取树的详细节点: 初始化函数为: function init(){ //初 ...
- ajax简单后台交互
ajax简单后台交互 1,扯淡 单身的生活,大部分时间享受自由,小部分时间忍受寂寞. 生活有时候,其实蛮苦涩,让人难以下咽.那些用岁月积累起来的苦闷,无处宣泄,在自己的脑海里蔓延成一片片荆棘,让你每每 ...
- 简单web网页与SSM后台交互
简单web网页与SSM后台交互 情况说明 如今,已经搭建好SSM后台开发环境,并且可以经由postman工具测试成功.现在尝试写出web前端网页,通过实现简单的提交.注册.查询功能来加深对前后端数据传 ...
- Extjs 4.2 Grid增删改及后台交互(Java)
上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录.苦于抽不出时间,一直拖到现在.不得不说,Extjs确实很强大,新版的Neptun ...
- 通过ajax前端后台交互/登录页和注册页前端后台交互详解/前端后台交互基础应用/几个后台函数的基础应用/php文件函数基础应用/php字符传函数基础应用/php数组函数基础应用
前 言 PHP 学习了好久的PHP,今天做一个可以后台交互的登录页和注册页,没做什么判断,简单的了解一下. 具体的内容分析如下: ① PHP中的数据传输-->>由注册页传输 ...
- PHP中使用 $_GET 与$_POST 实现简单的前后台数据传输交互功能
在之前的学习过程中我们接触过前后台数据请求交互的方法有表单提交.AJAX请求以及Angularjs中的$http,今天我们尝试在PHP中使用 $_GET 与$_POST 实现简单的前后台数据传输交互功 ...
- 如何用CropBox实现头像裁剪并与java后台交互
如何用CropBox实现头像裁剪并与java后台交互 参考网站:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob 参考: http://blo ...
- js与后台交互详述(入门篇)
很多新手前端在初期学习的时候往往把注意力放在如何编写页面,如何编写效果上,群里有个朋友问我js是如何与后台交互的,我简单的说一下. 首先需要知道两个东西,一个是客户端,一个是服务器,客户端其实就是我们 ...
- 项目中简单使用ztree,简单数据。
由于公司架构较旧,使用的jdk版本为1.4,页面上也没有el表达式. 加入 js 文件 <% String context = request.getContextPath(); %> & ...
随机推荐
- SWIFT--文档地址
APPLE官方: https://developer.apple.com/library/prerelease/content/documentation/Swift/Conceptual/Swift ...
- rabbitmq 相关方法
//连接$conn_args = array( 'host'=>'127.0.0.1' , 'port'=> '5672', 'login'=>'guest' , 'password ...
- HashTable、HashMap、HashSet
1. HashMap 1) hashmap的数据结构 Hashmap是一个数组和链表的结合体(在数据结构称“链表散列“),如下图示: 当我们往hashmap中put元素的时候,先根据key的hash ...
- VS2015中GLAUX库的链接问题
最近学习OpenGL,照着例子写了个程序,用到了GLAUX库. #include <gl\glaux.h> #pragma comment(lib, "glaux") ...
- 一个很好的UML工具
访问地址:www.visual-paradigm.com 工具使用帮助文档地址: http://www.visual-paradigm.com/support/documents/vpumluserg ...
- java线程安全
(一).java并发之原子性与可见性 原子性 原子是世界上的最小单位,具有不可分割性.比如 a=0:(a非long和double类型) 这个操作是不可分割的,那么我们说这个操作时原子操作.再比如:a+ ...
- 【HDU 3938】Portal (并查集+离线)
http://acm.hdu.edu.cn/showproblem.php?pid=3938 两点之间建立传送门需要的能量为他们之间所有路径里最小的T,一条路径的T为该路径上最长的边的长度.现在 Q ...
- 使用oracle utl_http包需要注意的事项
总结下几次使用utl_http包遇到的几个问题 关于utl_http包功能还是很强大的 可以通过他来捕捉网站页面的内容 或者调用一个url的接口完成某项功能 Eg: declare req UT ...
- 72.40个Android面试题(转载)
1. Android的四大组件是哪些,它们的作用? 答:Activity:Activity是Android程序与用户交互的窗口,是Android构造块中最基本的一种,它需要为保持各界面的状态,做很多持 ...
- 【matlab】设定函数默认参数
C++/java/python系列的语言,函数可以有默认值,通常类似如下的形式: funtion_name (param1, param2=default_value, ...) 到了matlab下发 ...