ztree异步加载树节点
参考文档：https://www.cnblogs.com/tenWood/p/8620708.html
ztree api地址：http://www.treejs.cn/v3/api.php
说明：jsp页面中有的方法在本实例中用不到，但是还是列出来了，目的是为了方便以后的扩展和改写。
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<meta HTTP-EQUIV="expires" CONTENT="0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
${jqery1_7_1}
${zTree3_5_24} <script type="text/javascript"> var setting = {
view: {
selectedMulti: false
},
async: {
enable: true, //是否为异步加载
url:"/${contextName}/${sys_id}/viewAffix/getAsyncAffixTreeData",
dataType: "json",
/*
* //异步加载时需要自动提交父节点属性的参数。[setting.async.enable = true 时生效]
* 1、 将需要作为参数提交的属性名称，制作成 Array 即可，例如：["id", "name"]
* 2、可以设置提交时的参数名称，例如 server 只接受 zId : ["id=zId"]
* */
autoParam:["pk_id","fk_pid"],
//Ajax 请求提交的静态参数键值对。[setting.async.enable = true 时生效]
otherParam:{"root_id":"${pk_id}"},
//用于对 Ajax 返回数据进行预处理的函数。[setting.async.enable = true 时生效]
dataFilter: filter
},
data:{
// keep:{
// parent: true
// },
key:{
name:"f_name"
},
//采用简单数据类型，不必嵌套复杂json数据格式
simpleData:{
enable:true, ////是否之用简单数据
idKey:"pk_id",
pIdKey:"fk_pid",
rootPId:""
}
},
callback: {
beforeClick: beforeClick, //用于捕获单击节点之前的事件回调函数，并且根据返回值确定是否允许单击操作
beforeAsync: beforeAsync, //用于捕获异步加载之前的事件回调函数，zTree 根据返回值确定是否允许进行异步加载 eg: 禁止 id 为 1 的父节点进行异步加载操作
onAsyncError: onAsyncError, //用于捕获异步加载出现异常错误的事件回调函数。如果设置了 setting.callback.beforeAsync 方法，且返回 false，将无法触发 onAsyncSuccess / onAsyncError 事件回调函数
onAsyncSuccess: onAsyncSuccess //用于捕获异步加载正常结束的事件回调函数 。如果设置了 setting.callback.beforeAsync 方法，且返回 false，将无法触发 onAsyncSuccess / onAsyncError 事件回调函数
}
}; function filter(treeId, parentNode, childNodes) {
// console.log('过滤数据!');
//判断是否为父节点
for (var i = 0; i < childNodes.length; i++){
if (childNodes[i].f_type == '1') {
childNodes[i].isParent = true;
}
}
return childNodes;
} //点击节点
function beforeClick(treeId, treeNode) {
if (!treeNode.isParent) {
alert("请选择父节点");
return false;
} else {
return true;
}
} //展开节点
function beforeAsync(treeId, treeNode) {
return true;
} function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
console.log('异步加载发生了错误！');
} function onAsyncSuccess(event, treeId, treeNode, msg) {
console.log('异步加载成功了');
} //初始化树 一开始初始化完tree时候，让第一个父节点展开了；
function initZTree(){
// console.log('初始化数据！');
$.ajax({
url: "/${contextName}/${sys_id}/viewAffix/getAsyncAffixTreeData",
type:"post",
dataType: "json",
cache:false, //是否缓存
async:true,//true 异步；false 同步
data:{
root_id: '${pk_id}'
},
success: function(data){
if (!data) {
return;
}
var nodes = data;
// console.log(nodes);
//判断节点是否为父节点
for(var i=0;i<nodes.length;i++){
if (nodes[i].f_type == '1') {
nodes[i].isParent = true;
}/*else {
nodes[i].isParent = false;
}*/
}
// console.log(nodes);
var zTreeObj = $.fn.zTree.init($("#ztree"),setting, data); //让第一个父节点展开
var rootNode_0 = zTreeObj.getNodeByParam('fk_pid',0,null);
zTreeObj.expandNode(rootNode_0, true, false, false, false);
},
error: function(){
alert('加载根节点发生了错误！');
}
});
} //初始化树的数据
$(document).ready(function(){
initZTree();
}); </script>
<title>查看文件详情</title>
</head>
<body>
<div class="zTreeDemoBackground left">
<ul id="ztree" class="ztree"></ul>
</div>
</body>
</html>
controller
/**
* 资料查看公用
* @param pk_id：单项工程id
*/
@RequestMapping("/asyncAffixtree")
public String asyncAffixtree(Model model,@RequestParam(value="pk_id", required=false)String pk_id){
model.addAttribute("pk_id", pk_id);//单项工程id
return "/web/gz/viewAffix/asyncAffixTree";
} /**
* 获取附件树
* @param root_id：根节点id
*/
@RequestMapping("/getAsyncAffixTreeData")
@ResponseBody
public Object getAsyncAffixTreeData(String root_id, String pk_id, String fk_pid){
return iViewAffixService.getAsyncAffixTreeData(root_id,pk_id,fk_pid);
}
service
/**
* 获取ztree树的数据
* @param root_id
* @param pk_id
* @param fk_pid
* @return
*/
@Override
public List<Map<String,Object>> getAsyncAffixTreeData(String root_id, String pk_id, String fk_pid) {
List<Map<String,Object>> list = new ArrayList<>();
if (root_id == null || root_id.trim().isEmpty()) {
return list;
}
String sys_id = getCurSysId();
//加载父节点和第一次子节点
if(fk_pid == null || fk_pid.trim().isEmpty()){
list = affixDao.getFirstLoadTreeData(sys_id, root_id);
return list;
}
list = affixDao.getMapDataByFkPid(sys_id, pk_id);
return list;
}
mapper
<select id="getFirstLoadTreeData" resultType="com.base.obj.BaseMap" parameterType="string">
select
pk_id, fk_pid, f_name, f_type
from
${sys_id}_kyps.T_C_AFFIX
where
pk_id = #{pk_id} or fk_pid = #{pk_id}
</select> <select id="getMapDataByFkPid" resultType="com.base.obj.BaseMap" parameterType="string">
select
pk_id, fk_pid, f_name, f_type
from
${sys_id}_kyps.T_C_AFFIX
where
FK_PID = #{fk_pid,jdbcType=VARCHAR}
</select>
初始化
异步加载后
ztree异步加载树节点的更多相关文章
- Jquery Ztree异步加载树
1. 下载jquery的JS文件/ztree的CSS文件和JS文件 https://jquery.com/download/ https://gitee.com/zTree/zTree_v3/tree ...
- ztree异步加载
Ztree异步加载的意思就是: 当点击展开树节点时,才去请求后台action返回点击节点的子节点数据并加载. 直接贴代码(SpringMvc+Mybatis): 前台页面ztreeList.jsp: ...
- jquery zTree异步加载的例子
下面是使用zTree异步加载的一个例子: 1)初始化树的时候是ajax请求,返回nodes列表来初始化树的:如果一开始就异步的话,$.fn.zTree.init($("#zTree" ...
- zTree 异步加载
zTree异步加载数据的简单实现,更为详细的Api请参考 zTree官网 http://www.treejs.cn/ <link href="~/Content/ztree/css ...
- Extjs整体加载树节点
Ext.onReady(function () { Ext.define('company', { extend: 'Ext.data.Mode ...
- Jquery树控件ZTree异步加载
异步加载的意思就是: 当点击展开树节点时,才去请求后台action返回点击节点的子节点数据并加载. 这里面主要设计ztree的setting变量的async属性设置: var setting = { ...
- Ztree异步加载自动展开节点
在Ztree的官网Demo中,有自动展开的例子,是通过设置节点属性open:true来实现自动展开的,但是在异步加载中,这个属性设置为true也不会自动展开,因为open:true是指在有子节点的情况 ...
- 玩转Web之easyui(二)-----easy ui 异步加载生成树节点（Tree），点击树生成tab(选项卡)
关于easy ui 异步加载生成树及点击树生成选项卡,这里直接给出代码,重点部分代码中均有注释 前台: $('#tree').tree({ url: '../servlet/School_Tree?i ...
- zTree异步加载并初始化树时全部展开（贴主要代码）
<%@page pageEncoding="UTF-8"%> <%@include file="/commons/include/html_doctyp ...
随机推荐
- sql注入（转载）
1.使用firefox浏览器(安装一个firebug插件)登录http://192.168.204.132/dvwa/login.php页面,使用admin/password 2.打开firebug工 ...
- 八大排序算法之七—堆排序（Heap Sort）
堆排序是一种树形选择排序,是对直接选择排序的有效改进. 基本思想: 堆的定义如下:具有n个元素的序列(k1,k2,...,kn),当且仅当满足 时称之为堆.由堆的定义可以看出,堆顶元素(即第一个元素) ...
- MyEclipse/Eclipse快捷键总结
MyEclipse/Eclipse快捷键 查找某个方法被谁调用:选中方法名,ctrl+shift+g 通过文件名称查找类或文件:ctrl+shift+r(Open Resource)
- 利用apache伪静态技术防止盗链
(在我们制作网站的过程中,可能会遇到这样的问题,就是其他的网站直接盗用了我们网站的图片或css或js,这样可能会大大增加我们自己网站的负载. 所以,我们应该考虑一下怎样防止这样的事情发生.) 下面我们 ...
- 保存canvas
http://www.crazybunqnq.com/2018/09/01/PythonSeleniumSaveCanvas/ http://www.webhek.com/post/save-canv ...
- js遍历对象所有的属性名称和值
/* * 用来遍历指定对象所有的属性名称和值 * obj 需要遍历的对象 * author: Jet Mah * website: http://www.javatang.com/archives/2 ...
- Linux学习笔记之yum安装和卸载软件
# yum -y install 包名(支持*) :自动选择y,全自动 # yum install 包名(支持*) :手动选择y or n # yum remove 包名(不支持*) # rpm -i ...
- GO语言学习笔记之Linux环境下安装GO语言
0x00 安装环境和GO版本 本篇是源码安装,非使用包管理工具安装. # Centos 7.4 # GO v1.11.2 0x01 下载GO安装包 # wget https://dl.google.c ...
- JDK源码之ReentrantLock
1.定义 ReentrantLock是一种可重入锁,允许一个线程对同一个资源重复加锁,如果说是当一个线程调用一个锁的lock()方法,然后再次调用锁的lock()方法,当锁不支持可重入时,该线程会被自 ...
- Golang数组注意细节
数组是多个相同类型数据的组合,一个数组一旦声明/定义了,其长度是固定的,不能动态变化. var arr[]int,这个arr就是slice切片. 数组中的元素可以是任何数据类型,包括值类型和引用类型, ...