树结构ztree的 ajax交互的简单使用
今天做前端页面要用到树结构，用了第三方插件ztree，搞了好久不过终于弄出来了，， 一点小心得。（用的版本 V3 ）
首先看下载的文件结构：
一：将要用到的CSS 和 JS 拷贝到工程中，我这里在工程中建一个文件夹ztreeStyle专门放ztree插件所需要的文件，里面可能有些文件用不上吧，但是我也不去深究了 刚接触 以后有时间在慢慢细化吧！
二：下面是action代码了，，非常之简单一目了然。
//此方法是当第一次进页面的时候为父节点赋值， 为了测试里面写的都是些死数据，
@RequestMapping(value="/ztree/ztreeTestget",method=RequestMethod.GET)
public String ztreeTestget(HttpServletResponse response,HttpServletRequest request,ModelMap model) throws Exception{
System.out.println("进来了进来了进来了进来了进来了进来了进来了进来了进来了进来了进来了");
List<PartyCategory > li=new ArrayList<PartyCategory>();
PartyCategory pp=new PartyCategory();
pp.setId(1); //id
pp.setParentId(0); //父ID
pp.setName("哈哈"); PartyCategory ppp=new PartyCategory();
ppp.setId(2);
ppp.setParentId(0);
ppp.setName("呵呵"); PartyCategory pppp=new PartyCategory();
pppp.setId(3);
pppp.setParentId(0);
pppp.setName("嘿嘿"); li.add(pp);
li.add(ppp);
li.add(pppp);
model.addAttribute("li", li); return "ZtreeTest";
} //次方法当点根节点的时候进去然后返回子节点数据 ， 为了测试ajax输出返回的是手写的死数据
@RequestMapping(value="/ztree/ztreeTest",method=RequestMethod.POST)
public void ztreeTest(String id,HttpServletResponse response,HttpServletRequest request) throws Exception{
request.setCharacterEncoding("gb2312");
response.setContentType("text/html;charset=utf-8");
PrintWriter pw = response.getWriter();
pw.write("[{\"id\":4,\"pId\":0,\"name\":\"" +11111+"\"},{\"id\":5,\"pId\":0,\"name\":\"" +22222+"\"}]");
}
三：下面是jsp，基本上自己没写什么就是从下载的插件里有demo页面代码拷贝过来就基本OK了 就是稍微的改动一些代码，自己加了少许的代码，，
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'addPost.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="description" content="This is my page">
</head>
<script type="text/javascript" src="${ctx }/res/js/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="${ctx }/res/ztreeStyle/css/demo.css" type="text/css">
<link rel="stylesheet" href="${ctx }/res/ztreeStyle/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${ctx }/res/ztreeStyle/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${ctx }/res/ztreeStyle/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="${ctx }/res/ztreeStyle/js/jquery.ztree.excheck-3.5.js"></script> <SCRIPT type="text/javascript"> var setting = {
async: {
enable: true,
url:"${ctx}/ztree/ztreeTest", //没点击一次节点AJAX 都会与此路径交互一次
autoParam:[ "id", "name" ], //ajax提交的时候，传的是id值
otherParam:{"chk":"chk"},
dataFilter: dataFilter
},
check: {
enable: true,
autoCheckTrigger: true
},
data: {
simpleData: {
enable: true,
idKey : "id", // id编号命名
pIdKey : "pId", // 父id编号命名
rootPId : 0
}
},
callback: {
onCheck: onCheck,
onAsyncSuccess: onAsyncSuccess
}
}; function dataFilter(treeId, parentNode, childNodes) {
if (parentNode.checkedEx === true) {
for(var i=0, l=childNodes.length; i<l; i++) {
childNodes[i].checked = parentNode.checked;
childNodes[i].halfCheck = false;
childNodes[i].checkedEx = true;
}
}
return childNodes;
}
function onCheck(event, treeId, treeNode) {
cancelHalf(treeNode)
treeNode.checkedEx = true;
}
function onAsyncSuccess(event, treeId, treeNode, msg) {
cancelHalf(treeNode);
}
function cancelHalf(treeNode) {
if (treeNode.checkedEx) return;
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
treeNode.halfCheck = false;
zTree.updateNode(treeNode);
}
var zNodes =[
//这里我用到了jstl表达式forEach循环，循环的就是
//后台request作用域里存放的数据，而这里就是首次加载页面是树显示的根节点
<c:forEach items="${li}" var="abc" varStatus="vs">
{ id:"${abc.id}", pId:"${abc.parentId}", name:"${abc.name}"},
</c:forEach>
]; $(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}); //获取节点复选框的值
function onCheck(e,treeId,treeNode){
var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
nodes=treeObj.getCheckedNodes(true),
v="";
id="";
for(var i=0;i<nodes.length;i++){
v+=nodes[i].name + ",";
id+=nodes[i].id + ",";
// alert(nodes[i].id); //获取选中节点的值
}
alert(id); //获取选中节点的值
$("#myid").val(id);
} </SCRIPT> <body>
<hr/>
<input type="text" id="myid" />
<br/>
<form action="" method="post">
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" name="trees" class="ztree"></ul>
</div>
</div>
<input type="submit" value="form提交">
</form>
——————————————————————————————————————————————————————————————————————————————————————————————————————
<h1><a href="${ctx }/ztree/ztreeTestget">测试</a></h1> </body>
</html>
此时已经结束了，，简单的一棵ajax请求的树已经实现，，
树结构ztree的 ajax交互的简单使用的更多相关文章
- （二 ）结构ztree的 ajax交互的简单使用
在第一篇的基础上更改,在实际项目中的使用. 一:HTML 代码: <SCRIPT type="text/javascript"> var setting = { asy ...
- ajax交互数据简单拼装，数组成字符串
json2Form:function(json) { var str = ""; for(var p in json){ // 判断对象是否为数组 if(typeof json[p ...
- struts2 的验证框架validation如何返回json数据 以方便ajax交互
struts2 的验证框架validation简单,好用,但是input只能输出到jsp页面通过struts2的标签<s:fielderror />才能取出,(EL应该也可以). 如果使 ...
- struts2中使用json插件实现ajax交互
json插件可以简单的实现ajax交互,避免了使用struts2-dojo-plugin.jar包时带来的struts2.x版本冲突问题.并且减少了使用ajax标签时需要的繁琐的配置包括web.xml ...
- Python搭建Web服务器，与Ajax交互，接收处理Get和Post请求的简易结构
用python搭建web服务器,与ajax交互,接收处理Get和Post请求:简单实用,没有用框架,适用于简单需求,更多功能可进行扩展. python有自带模块BaseHTTPServer.CGIHT ...
- jq的ajax交互封装
jq封装的ajax,然后 在此前和此后都是很多要考虑的 ,何不 想想构思封装下. 下面: 基本上网页都存在各种ajax,使得网页变得更加易于操作. 举个长长的例子吧: <input type= ...
- ThinkPHP中使用ajaxReturn进行ajax交互
以管理员登录为例来介绍下$this->ajaxReturn与模板页进行ajax交互使用方法 首先看PHP控制器的处理,在application/Admin/Controller/LoginCon ...
- 关于文件上传的ajax交互
首先我们来了解一下上传文件 <input type="file"> input的file常用上传类型 后缀名 MIME名称 *.3gpp audio/3gpp, vid ...
- springmvc与ajax交互常见问题
这是我个人再编写博客系统的时候,因个人疏忽犯下的低级错误. 不过犯错是一件好事,有助于总结. 1.关于参数前加@RequestBody 如果是使用ajax交互时,必须要加上这个contentType: ...
随机推荐
- Zabbix3.0安装与部署（centos7）
注:整理至http://blog.51cto.com/afterdawn/1923359 1 需要先搭建LAMP环境 http://www.cnblogs.com/cation/p/8882910.h ...
- 20165101刘天野 2017-2018-2 《Java程序设计》第5周学习总结
#20165101刘天野 2017-2018-2 <Java程序设计>第5周学习总结 教材学习内容总结 第七章:内部类与异常类 内部类(nested classes),面向对象程序设计中, ...
- python中threading多线程
python中有两个处理多线程的模块thread和threading.其中thread提供了多线程底层支持的模块,以低级原始的发那个是来处理和控制线程,使用起来较为复杂:而threading基于thr ...
- Windows Server 2008 IIS的备份和还原
Windows Server 2008 IIS的备份和还原 当我们服务器系统有大量的站点和虚拟目录的时候,因为种种原因需要重做系统,那么重装系统后这些站点我们是否只能一个一个的添加,如果有成百上千个站 ...
- linux下pycharm的使用
百度搜索pycharm 然后打开pycharm的官网 然后在官网首页点击down 如果使用的是Linux系统,那么默认已经选择Linux版本 左边的down是全功能的IDE和WEB扩展,属于商业版 ...
- 增强织梦DedeCMS“更新系统缓存”清理沉余缓存的功能
我们使用织梦DedeCMS系统有很长一段时间后,不间断的在后台更新系统缓存的时候,有些缓存文件夹及缓存文件没有被清理,导致日积月累的垃圾缓存文件越来越多,可以以百千万计算,现在增强更新系统缓存功能清理 ...
- matlab学习笔记，图像分块
clc; clear all; close all; I = imread('E:\matlab\files-images\tomsen512.jpg'); rs = size(I, 1);% 行数c ...
- 回溯法之n皇后问题
package main import ( "fmt" "math" ) //判断第k行的某一列放置是否合法 func check(col []int, k i ...
- 【Swoole】简单安装与创建TCP服务器
pecl install swoole PHP的异步.并行.高性能网络通信引擎,使用纯C语言编写,提供了php语言的异步多线程服务器,异步TCP/UDP网络客户端,异步MySQL,异步Redis,数据 ...
- QT5 QtreeWidget 实现点击item事件以及右键菜单删除item 和 重命名item
1.new 一个QTreeWidget 对象,并设置头标签,和根节点(个人程序需要) QTreeWidget* treeWidget = ui.treeWidget;//我已经在ui设计师中拖了一个Q ...