树结构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: ...
随机推荐
- PHP递归和非递归遍历文件夹下文件
function readDirFiles($dir){ $files= []; $queue=[realpath($dir)]; $currentPath = current($queue); wh ...
- Centos7 关闭Ipv6
- keystone v2/v3
Changing from APIv2.0 to APIv3 in Keystone - Openstack Juno on Ubuntu 1. 更换v3 的policy文件 mv /etc/keys ...
- thinkphp中如何使用phpspreadsheet插件
thinkphp中如何使用phpspreadsheet插件 一.总结 一句话总结:多百度,百度什么都有 1.thinkphp中用composer安装的插件的命名空间是什么? use PhpOffice ...
- 解决：Python爬取https站点时SNIMissingWarning和InsecurePlatformWarning
今天想利用Requests库爬取糗事百科站点,写了一个请求,却报错了: 后来参考kinsomy的博客,在cmd中pip install pyopenssl ndg-httpsclient pyasn1 ...
- shell脚本：利用7z备份git项目
注:无git的方法参见:tar 或 7z 备份项目 首先利用homebrew安装p7zip $ brew install p7zip 然后利用两个shell脚本: backupProject.sh 会 ...
- json与NSString转换
json to string NSData *jsonData = [NSJSONSerialization dataWithJSONObject:json options:NSJSONWriting ...
- 关于WM8741对于32位音频的支持
WM8741据说是支持到32位192K,但实际上,对于32位,它只是支持I2S总线上32位数据输入,内部还是转换成24位来做滤波处理的,DA转换的精度是达不到32位的.不过它在转换到24位的时候有一个 ...
- Ceph中Bufferlist的设计与使用
转自:https://www.ustack.com/blog/bufferlist/ 如果非要在整个Ceph中,找出一个类最重要,我觉得非Bufferlist莫属了,原因很简单,因为Bufferlis ...
- 三张图较为好理解JavaScript的原型对象与原型链
最近从网上看到别人详细得讲解了js的原型对象和原型链,看完感觉是看得最清晰的一个,于是,摘录到自己博客里 对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与_ ...