树结构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: ...
随机推荐
- 《网络对抗》 逆向及Bof基础实践
<网络对抗>-逆向及Bof基础实践 1 逆向及Bof基础实践说明 1.1 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数, ...
- mini2440移植uboot 2014.04(六）
上一篇博文:<mini2440移植uboot 2014.04(五)> 代码已经上传到github上:https://github.com/qiaoyuguo/u-boot-2014.04- ...
- hive -e 时转义需要再加一个\
hive窗口中使用转义字符: select split(concat_ws('|','123','456','789'),'\\|')from dual; 参考 http://jingyan.baid ...
- 让FireFox支持 window.event 全局事件对象
这里比原文稍加改进,让FF也支持 event.srcElement了, 省得每次写兼容代码挺麻烦的: //For firefox window.event if(typeof(window.event ...
- One 的使用（1）
方法一:使用命令提示符 第一步:打开d盘 C:Users\dcf>d; 第二步:打开工作空间 D:\>Cd workspace 第三步:打开the one D:\workspace& ...
- Struts2的<s:date>标签使用详解[转]
作用:用来格式化显示日期的格式. 它可以用一种你指定的格式来显示 (如:“yyyy-MM-dd”),可以生成通俗易懂的注释(如:in 2 hours,14 minutes),或者用预先定义的一个格式来 ...
- Centos7 远程登录端口22 设置
第一步 #查看本机是否安装SSH软件包 [root@localhost ~]# rpm -qa | grep ssh openssh-server-6.6.1p1-12.el7_1.x86_64 op ...
- nodejs 中 excel-export 使用介绍
1. 为了在nodejs 服务器端操作数据导出excel 格式用的 excel-export 包地址:https://github.com/functionscope/Node-Excel-Expo ...
- Codeforces Round #395 (Div. 2) C
题意 : 给出一颗树 每个点都有一个颜色 选一个点作为根节点 使它的子树各自纯色 我想到了缩点后check直径 当<=3的时候可能有解 12必定有解 3的时候需要check直径中点的组成点里是否 ...
- .net如何解析二维码图片
二维码现在越来越流行,可以使用手机上或其它移动终端上的二维码扫描器软件对着二维码一扫,就可以得到相关信息.在互联网站上,可以找到很多二维码的工具,甚至还有不少在线生成.解析二维码的网站.在业务系统当中 ...